Question

我希望在拖动后将我的div复制到另一个div中，并允许用户再次拖放副本。这是我的代码：

<div class="elements">
  <div class="drag">1
  </div>
  <div class="drag">2
  </div>
  <div class="drag">3
  </div>
  <div class="drag">4
  </div>
</div>
<div class="container">

</div>

Jquery的：

$('.drag').draggable();

$( ".container" ).droppable({
      classes: {
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function( event, ui ) {
        $('.drag').last().after('<div class="drag">'+ui.draggable[0].innerHTML+'</div>') 
      }
    });

a JSFIDDLE。问题是：div的副本不可拖动。感谢

Answer 1

通过在生成这些副本的函数中添加$('.drag').draggable();，只需让生成的副本再次可拖动。

$(function(){

$('.drag').draggable();

$( ".container" ).droppable({
      classes: {
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function( event, ui ) {
        $('.drag').last().after('<div class="drag ui-draggable">'+ui.draggable[0].innerHTML+'</div>') 
        $('.drag').draggable();
      }
    });

})

<强> JSFIDDLE

<强>更新

使用$('.dropped').draggable('disable');添加另一个类，并使用$(function(){ $('.drag').draggable(); $( ".container" ).droppable({ classes: { "ui-droppable-hover": "ui-state-hover" }, drop: function( event, ui ) { $(ui.draggable).addClass('dropped'); $('dropped').removeClass('ui-draggable ui-draggable-handle ui-droppable drag'); $('.dropped').draggable('disable'); $('.drag').last().after('<div class="drag ui-draggable">'+ui.draggable[0].innerHTML+'</div>') $('.drag').draggable(); } }); })对其进行反对拖动将解决我猜测的问题

{{1}}

<强> JSFIDDLE

拖动jquery后复制div

1 个答案: