Question

我有一个拖放代码。我想拖动一个项目，同时它应该在可拖动列表中留下一个副本。例如

list1         
aa
bb
cc

list2
zz
xx
mm

所以我想将 aa 拖到list2，但 aa 应该保留在列表中。

$('#example-1-3 .sortable-list').sortable({
   connectWith: '#example-1-4 .sortable-list'
});

<div class="dhe-example-section" id="ex-1-3">
<div class="dhe-example-section-content">
<!-- BEGIN: XHTML for example 1.3 -->

<div id="example-1-3">

<ul class="sortable-list ui-sortable">
<li class="sortable-item">Deposit INterest</li>
<li class="sortable-item">GDP% of total</li>
<li class="sortable-item">GDP curr($)</li>
<li class="sortable-item">Health exp</li>
</ul>

</div>

<!-- END: XHTML for example 1.3 -->

</div>
</div><br><br>  
</div>
</div>
</div>


<div class="dhe-example-section" id="ex-1-4">
<div class="dhe-example-section-content" >
<!-- BEGIN: XHTML for example 1.4 -->
<div id="example-1-4">
<div class="column left first">

<ul class="sortable-list ui-sortable"><br>
<li class="sortable-item">Sortable item A</li>
<li class="sortable-item">Sortable item B</li>
</ul>

</div>
</div></div></div>

Answer 1

您必须以.draggable()和.sortable()这种方式来满足您的需求。可能这可以帮助你：

$('.sortable-list').sortable({
   connectWith: '#example-1-4 .sortable-list',
   revert: true
}).disableSelection();

$('.sortable-list li').draggable({ //<------------make the list items draggables
   connectToSortable: '#example-1-4 .sortable-list', //<---this is v.imp
   helper : "clone"  //<-------------------------------use this to get a copy
});

Fiddle Demo

Answer 2

我认为您正在寻找的是开始拖动时显示的帮助：http://api.jqueryui.com/sortable/#option-helper

$('#example-1-3 .sortable-list').sortable({
   connectWith: '#example-1-4 .sortable-list',
   helper: "clone"
});

拖动时应显示克隆并将原始内容留在原位

如何拖动一个项目，但它应该仍然保留在原来的位置？

2 个答案:

Fiddle Demo