使用 jquery ui 的可拖动 div 克隆答案

【问题标题】：Draggable div clone using jquery ui使用 jquery ui 的可拖动 div 克隆
【发布时间】：2013-07-02 01:36:15
【问题描述】：

我有一个大问题，因为我是初学者。

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

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

【问题讨论】：

发生了什么？ div是否在拖动？它是拖动而不是克隆？请提供更多细节。 “出了点问题”是不可能排除故障的:)
可以拖动但不能克隆
在这里你可以看到我想做的事情：jsbin.com/erofot/17，所以 div 必须可以拖到表格中，并且可以调整大小并且不改变表格行高

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable

【解决方案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());
      }
    });
  });
});

【讨论】：

效果不佳。 1.table 在拖动时改变高度，2. div 拖动后不可调整大小，3. div 不会按我想要的那样停留在位置，而不是 left:0px ...
在这里你可以看到我想做的事情：jsbin.com/erofot/17，所以 div 必须可以拖到表格中，并且可以调整大小并且不改变表格行高
所以我需要像这里一样工作：jsbin.com/erofot/17 但要克隆
您为什么不直接查看并尝试复制他们在该演示站点上使用的 JavaScript？
这是我的代码，我只使用这个示例 drom jquery 教程，但没有我需要的东西

【解决方案2】：

可拖动的 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());
      }
    });
  });
});

【讨论】：

是的，但在拖动后，div 的位置在 left:0px 并且不要像我想要的那样保持不变，拖动后可调整大小也不起作用
在这里你可以看到我想做的事情：jsbin.com/erofot/17，所以 div 必须可以拖到表格中并且可以调整大小并且不能更改表格行高，所以我需要像这样工作，但需要克隆，只是。该怎么做？
将项目克隆到可放置区域后，您需要将克隆的对象绑定为新的可拖动和可调整大小。
是的，要成为新对象，也可以保持在从侧边栏拖动的位置等位置。 left:55px 或某个值...
所以请在这个例子中显示这个锄头。非常感谢

【解决方案3】：

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

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

snap: "#drop_here td",

【讨论】：