jQuery UI的拖拽效應

在一個面板我有所謂的資源，像一個黃色正方形，jQuery UI的拖拽效應

我想要的元素拖到另一個面板，並複製一個，但原來的一個還在那裏，

標記非常簡單：

<div id="panel"> 
     <div id="square" class="square"></div> //the resource 
    </div> 
    <div id="canvas"> 
    </div>

拖動的js代碼：

$('#panel .square').draggable({ 
    appendTo: "#canvas", 
    helper: "clone" 
}); 

$('#canvas').droppable({ 
    drop: function (e, ui) { 
     var $temp_id = $(ui.draggable).attr('id'); 
     var $new_id = $temp_id + "_01"; 
     $(ui.draggable).clone() 
         .css({ 'top': ui.offset.top, 'left': ui.offset.left }) 
         .appendTo($(this)) 
         .attr('id', $new_id); 

     $('#'+$new_id+'').draggable(); 
    } 
});

我只想資源eleme NT可以複製自己，但是畫布中的副本也可以複製自己！繼承複製能力！

謝謝

這裏example

我做了什麼？爲什麼這會發生？我怎樣才能取消呢？

來源

2012-03-11 hh54188

你有沒有想過要從克隆的元素中刪除.square？類似.attr（'id'，$ new_id）.attr（'class'，'square-no-drag'）; ？ – Ohgodwhy 2012-03-11 21:07:55

只需將其添加到您的放置事件。

ui.draggable.remove();

這將刪除原始元素。

也爲了防止您的項目的重複，考慮將其添加到您的可拖動。

accept: function(d) { 
     return $(this).find(d).length == 0 
}

它的功能是什麼;它會檢查您的容器是否存在對象d，如果該對象存在，則代碼將爲return false，從而防止導致重複的對象丟失。

希望這會有所幫助。

來源

2012-03-12 08:28:05 Drew

jQuery UI的拖拽效應

回答

相關問題