Question

我这里有一个很大的问题，因为我很喜欢这个。

我使用jquery ui来拖放div但是当我开始拖动时我需要它来克隆div。

我尝试使用此代码，但有些问题：

google.maps.event.addListener(map, 'tilesloaded', function(evt) {
$(function() {
    $( ".draggable" ).resizable();
  $( ".draggable" ).draggable({revert: 'invalid', helper: 'clone', snap: "#drop_here td", opacity: 0.7});
    $( "#drop_here td" ).droppable({
      accept: '.draggable',
      drop: function( event, ui ) {
        $( this )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });    });

演示：http://jsbin.com/erofot/17

Doeas任何人都知道为什么这段代码无效？

Answer 1

你需要创建一个被拖动对象的克隆，对吗？

google.maps.event.addListener(map, 'tilesloaded', function(evt) {
  $(function() {
    $( ".draggable" ).resizable();
    $( ".draggable" ).draggable({ helper: 'clone', snap: "#drop_here td", opacity: 0.7});
    $( ".draggable" ).draggable({
        start: function() {
            var drgClone = $(this).clone(true);
        }
    })
    $( "#drop_here td" ).droppable({
      accept: '.draggable',
      drop: function( event, ui ) {
        $(this).append($(ui.draggable).clone());
      }
    });
  });
});

Answer 2

助手：draggable的'clone'选项仅在拖动时创建div的克隆。

尝试在droppable小部件的drop事件期间附加克隆。（注意：我也从draggable中删除了revert选项，因为它不需要）

google.maps.event.addListener(map, 'tilesloaded', function(evt) {
  $(function() {
    $( ".draggable" ).resizable();
    $( ".draggable" ).draggable({ helper: 'clone', snap: "#drop_here td", opacity: 0.7});
    $( "#drop_here td" ).droppable({
      accept: '.draggable',
      drop: function( event, ui ) {
        $(this).append($(ui.draggable).clone());
      }
    });
  });
});

Answer 3

我需要扩展此功能。 DevlshOne的答案正在发挥作用。但我需要克隆的元素可拖动。目前它不是，即使“可拖动”包含在班级列表中。

和btw，什么是捕捉？

snap: "#drop_here td",

使用jquery ui进行可拖动的div克隆

3 个答案: