相同 ul 或 div 中的 Jquery UI 可拖动克隆答案

【问题标题】：Jquery UI Draggable clone in same ul or div相同 ul 或 div 中的 Jquery UI 可拖动克隆
【发布时间】：2014-04-15 08:09:33
【问题描述】：

在实现克隆功能时，我发现 li 总是在最后创建，并且任何 li 都是通过拖动另一个 li 而创建的，而不会放到任何特定位置。我无法在母亲帮助下实施 li 克隆。以下是我找到的参考资料和demo如下。

参考文献

how to initiate .clone using drag & drop or click jquery

javascript - how to make multiple draggable clones?

我无法在 Jsfiddle 上运行演示，所以我将整个代码放在这里。

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

  <style type="text/css">
    li {
    border:1px dashed Gainsboro;
    background-color:cornflowerblue;
    color:FloralWhite;
    font-family:Cursive;
    float:left;
    padding:8px;
    margin:2px;
}

ul {
    border:1px solid PowderBlue;
    min-height:50px;

}
  </style>



<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#list-A li').draggable({
    helper: 'clone'
});
$('#list-A ul').droppable({
    drop: function(event, ui) {
        if(ui.draggable.data('sorting'))
            return;
        $(this).append($(ui.draggable).clone());
    }
}).sortable({
    start: function(event, ui) {
        ui.item.data('sorting', true);
    },
    stop: function(event, ui) {
        ui.item.removeData('sorting');
    }
});
});//]]>  

</script>


</head>
<body style="cursor: auto;">
  <div id="list-A">
    <ul class="sortable2">
        <li class="ui-draggable">drag item 1</li>
        <li class="ui-draggable">drag item 2</li>
        <li class="ui-draggable">drag item 3</li>
        <li class="ui-draggable">drag item 4</li>
        <li class="ui-draggable">drag item 5</li>
        <li class="ui-draggable">drag item 6</li>
    </ul>
</div>

</body></html>

【问题讨论】：

您到底想要发生什么？我将您的 css 从 float:left 更改为 display:inline-block' so that your parent element will scale with the cloned li's. Currently if you drag an original li` 它将克隆而没有排序功能，但随后克隆将是可排序的。看看这个小提琴jsfiddle.net/trevordowdle/VR2wz你到底在找什么？谢谢

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

【解决方案1】：

假设您希望它既可克隆又可排序

$('#list-A ul').sortable({
    start: function(event, ui) {
        ui.helper.before(ui.helper.clone().attr('style',''));
        ui.item.data('sorting', true);
    },
    stop: function(event, ui) {
        ui.item.removeData('sorting');
    }
});

例子：

Fiddle

【讨论】：

但是有一个问题。如果我已经开始拖动，我将无法取消复制
@Soumya 你希望如何取消拖动，或者你想做什么来取消拖动？
@Soumya 我不确定您在寻找什么，但这里有一个示例，如果您在删除可排序对象时按住 alt 键，它将取消它。 jsfiddle.net/trevordowdle/LSgs5/1
是的，这是有道理的。谢谢特拉弗。它解决了我所有的要求。是的，我想要那个 altkey 停止功能。再次感谢。