10/10/2018, 10:41

giúp lấy object clone khi drag and drop trong jquery ui

Hi các bạn

Mình đang dev hệ thống modules cho website mình , nó có phần quản lý widget khá giống với wordpress mà các bạn có thể xem 1 demo như sau :
http://www.gamemakervn.co.cc/draganddrop.html

Các widget cơ bản bên trái sẽ được kéo vào các sidebar bên phải . ở đây có nhiều loại widget và nhiều sidebar . mỗi widget có thể được sử dụng nhiều lần với setting khác nhau .

khi các widget được bỏ vào 1 sidebar , nó sẽ tạo ra 1 clone . và mình muốn trong event widget stop , tạo ra 1 clone thì lấy được clone object = js để thực hiện 1 số động tác khác như thay đổi id , mở phần setting , đổi tên của widget ...

có vẻ như jquery không hỗ trợ điều này , hoặc hiểu biết mình hạn chế ,hoặc hướng đi của mình sai . mời các cao thủ jquery ui giúp đỡ !

many thanks !

cấu trúc html

Code:

<div style="float:left;width:300px;">
		<div id="all_modules">
			<div class="single_module" id="module1">
				<div class="module_title">
					module1
				</div>
				<div class="module_content">
					nội dung module1
				</div>
			</div>
			<div class="single_module" id="module2">
				<div class="module_title">
					module2
				</div>
				<div class="module_content">
					nội dung module2
				</div>
			</div>
		</div>
	</div>
	<div style="float:left;width:300px;">
		<div id="sidebar1" class="sidebar">
		</div>
		<div id="sidebar2" class="sidebar">
		</div>
	</div>

js script

Code:

<script type="text/javascript">
	$(function() {
		$(".sidebar").sortable({
			revert: true,
			connectWith: '.sidebar',
			placeholder: 'module_place_holder',
			opacity: 0.5 ,
			update: function(){
				$(this).find('.single_module').each(function(index){
					//alert($(this).attr('id'));
				});
			}
		});
		$(".single_module").draggable({
			connectToSortable  : '.sidebar',
			helper: 'clone',			        revert: 'invalid',
			opacity: 0.5 ,
			stop: function(){
                         //cần lấy clone object ở đây 			
                         }
		});		
                 $(".single_module").disableSelection();
	});
</script>

[=========> Bổ sung bài viết <=========]

Sau khi dùng firebug test cật lực thì mình phát hiện ra helper clone chỉ là 1 clone giả , nó chỉ có nhiệm vụ làm widget trong quá trình di chuyển . khi stop thì nó sẽ biến mất .
nếu widget này hover lên sidebar thì nó sẽ tạo ra 1 widget ngầm , nếu ko hover thì widget ngầm sẽ biến mất . như vậy chỉ khi nào bỏ widget clone giả (helper) lên sidebar thì nó mới biến widget ngầm hiện lên .
Thanks firebug .

chính vì nó tạo ra widget ngầm và hiện lên khi thả widget trên sidebar , lúc này ko còn phân biệt được widget mới và cũ . do phần setting chỉ được sử dụng trong widget đã active , nên mình chơi mẹo là widget nào đã hiện nút setting thì là widget cũ , chưa hiện nút setting thì sẽ là widget mới (và update nó để thành widget cũ phục vụ cho lần sau ).rất may mẹo đã hoạt động tốt

Mình đã update demo lên , để các bạn quan tâm có thể theo dõi : http://www.gamemakervn.co.cc/draganddrop.html

javascript updated

Code:

<script type="text/javascript">
	$(function() {
		$(".sidebar").sortable({
			revert: true,
			connectWith: '.sidebar',
			placeholder: 'module_place_holder',
			opacity: 0.5 ,
			update: function(){
			}
		});
		$(".single_module").draggable({
			connectToSortable  : '.sidebar',
			helper: 'clone',
			revert: 'invalid',
			opacity: 0.5 ,
			stop: function(){
				$(".sidebar").find('.single_module').each(function(){
				   if($(this).find('.setting_button_div').css('display')=='none'){						
                                         $(this).find('.setting_button_div').show();
                              	       $(this).find('.module_title').bind('click', function() {
							if($(this).parent().find('.module_body').css('display')=='none'){
								$(this).parent().find('.module_body').show();
							}else{
								$(this).parent().find('.module_body').hide();
							}
						});
						$(this).find('.setting_button').bind('click', function() {
							if($(this).parent().parent().find('.module_setting').css('display')=='none'){
								$(this).parent().parent().find('.module_setting').show();
								$(this).parent().parent().find('.module_content').hide();
								$(this).parent().find('.update_button').show();
								$(this).html('Cancel');
							}else{
								$(this).parent().parent().find('.module_setting').hide();
								$(this).parent().parent().find('.module_content').show();
								$(this).parent().find('.update_button').hide();
								$(this).html('Setting');
							}
						});
						$(this).find('.update_button').bind('click', function() {
							alert('will update with ajax');
						});
					}
				});
			},
		});
		$(".single_module").disableSelection();
	});
</script>

namduong8889 viết 12:50 ngày 10/10/2018

sao lại helper gì, bạn chạy cake à

ngoc_viet08 viết 12:47 ngày 10/10/2018

http://jqueryui.com/demos/draggable/

ui.helper - the jQuery object representing the helper that's being dragged

kenphan19 viết 12:42 ngày 10/10/2018

Được gửi bởi ngoc_viet08

Code:

<div style="float:left;width:300px;">
		<div id="all_modules">
			<div class="single_module" id="module1">
				<div class="module_title">
					module1
				</div>
				<div class="module_content">
					nội dung module1
				</div>
			</div>
			<div class="single_module" id="module2">
				<div class="module_title">
					module2
				</div>
				<div class="module_content">
					nội dung module2
				</div>
			</div>
		</div>
	</div>
	<div style="float:left;width:300px;">
		<div id="sidebar1" class="sidebar">
		</div>
		<div id="sidebar2" class="sidebar">
		</div>
	</div>

js script

Code:

<script type="text/javascript">
	$(function() {
		$(".sidebar").sortable({
			revert: true,
			connectWith: '.sidebar',
			placeholder: 'module_place_holder',
			opacity: 0.5 ,
			update: function(){
				$(this).find('.single_module').each(function(index){
					//alert($(this).attr('id'));
				});
			}
		});
		$(".single_module").draggable({
			connectToSortable  : '.sidebar',
			helper: 'clone',			        revert: 'invalid',
			opacity: 0.5 ,
			stop: function(){
                         //cần lấy clone object ở đây 			
                         }
		});		
                 $(".single_module").disableSelection();
	});
</script>

Code:

<script type="text/javascript">
	$(function() {
		$(".sidebar").sortable({
			revert: true,
			connectWith: '.sidebar',
			placeholder: 'module_place_holder',
			opacity: 0.5 ,
			update: function(){
			}
		});
		$(".single_module").draggable({
			connectToSortable  : '.sidebar',
			helper: 'clone',
			revert: 'invalid',
			opacity: 0.5 ,
			stop: function(){
				$(".sidebar").find('.single_module').each(function(){
				   if($(this).find('.setting_button_div').css('display')=='none'){						
                                         $(this).find('.setting_button_div').show();
                              	       $(this).find('.module_title').bind('click', function() {
							if($(this).parent().find('.module_body').css('display')=='none'){
								$(this).parent().find('.module_body').show();
							}else{
								$(this).parent().find('.module_body').hide();
							}
						});
						$(this).find('.setting_button').bind('click', function() {
							if($(this).parent().parent().find('.module_setting').css('display')=='none'){
								$(this).parent().parent().find('.module_setting').show();
								$(this).parent().parent().find('.module_content').hide();
								$(this).parent().find('.update_button').show();
								$(this).html('Cancel');
							}else{
								$(this).parent().parent().find('.module_setting').hide();
								$(this).parent().parent().find('.module_content').show();
								$(this).parent().find('.update_button').hide();
								$(this).html('Setting');
							}
						});
						$(this).find('.update_button').bind('click', function() {
							alert('will update with ajax');
						});
					}
				});
			},
		});
		$(".single_module").disableSelection();
	});
</script>

sao mà .parent() tá lã trong đó thế cache nó lại, viết thế tốn tài nguyên lắm

ngoc_viet08 viết 12:57 ngày 10/10/2018

yep! em chưa dev kĩ , chỉ dev test . thanks pro jquery đã góp ý

honnhienh viết 12:55 ngày 10/10/2018

ôi những pro.........

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

ngoc_viet08

0 chủ đề

0 bài viết