Jquery UI可在同一ul或div中拖动克隆

在实现克隆功能时，我发现li总是在末尾创建的，并且任何li都是在只拖动另一个li的情况下创建的，而不会掉落到任何特定位置。我无法实现李克隆上的下一个妈妈的帮助。以下是我找到的参考资料和演示。

推荐

如何启动。使用拖动克隆&放置或单击jquery

javascript-如何制作多个可拖动的克隆？

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

<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>

假设您希望它同时支持克隆和排序

$('#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

相关内容

最新更新

热门标签：