0

我在这里遇到了一个大问题，因为我是这方面的初学者。

我使用 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

有人知道为什么这段代码不起作用吗？

4

3 回答 3

2

您需要创建被拖动对象的克隆，对吗？

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());
      }
    });
  });
});
于 2013-07-02T03:58:29.270 回答
0

可拖动的 helper: 'clone' 选项仅在拖动时创建 div 的克隆。

尝试在可放置小部件的放置事件期间附加克隆。（注意：我还从可拖动中删除了还原选项，因为它不需要）

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());
      }
    });
  });
});
于 2013-07-02T03:23:16.640 回答
0

我需要扩展这个功能。DevlshOne 的回答是有效的。但我需要克隆的元素是可拖动的。目前它不是，即使“可拖动”包含在类的列表中。

顺便说一句，snap 有什么用？

snap: "#drop_here td",
于 2014-06-27T15:48:13.030 回答