Question

如何克隆拖动的元素并使原始元素保持原始位置。我想要＆＃34;元素＆＃34;在下面的div中进行克隆，然后我希望克隆能够在黑色边框的框中附加，如果它被删除。这是我的代码： -

＆＃13;

$(window).load(function(){


$('.me').draggable({
                helper:"clone",
                containment:"document"
});

$('#a').droppable({
        greedy: true,
        drop:function(event, ui) {
            ui.draggable.detach().appendTo($(this));
        }
});

});

＆＃13;

  #a{
  height: 100px;
  width:100px;
  border:2px solid black;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>





  
<span class="me">element</span>




  <div id="a"></div>

＆＃13;

我非常感谢你的帮助。

Answer 1

您可以在dragstop事件

上克隆元素

修改

正如Kevkong在其评论中所建议的那样，在clone事件中使用detach代替drop并简单地实现此目标

$(window).load(function(){ $('.me').draggable({ helper:"clone", containment:"document" }); $('#a').droppable({ greedy: true, drop:function(event, ui) { ui.draggable.clone().appendTo($(this)); ui.helper.data('dropped', true); } }); });

#a{ height: 100px; width:100px; border:2px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <span class="me">element</span> <div id="a"></div>

如何在jqueryUI中克隆拖动的元素

1 个答案: