Question

在实现克隆的功能时，我发现li总是在末尾创建，而任何li只是拖动另一个li而不会落入任何特定位置。我无法在下一个母亲的帮助下实施li克隆。以下是我找到的参考和演示如下。

Referrences

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

javascript - how to make multiple draggable clones?

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

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

Answer 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

Jquery UI Draggable克隆在相同的ul或div中

1 个答案: