jQuery に 2 つの並べ替え可能なリストがあります。それらは sortable1 および sortable2 と呼ばれます。それらは <ul> の <li> です。ユーザーが要素を sortable2 から sortable1 にドラッグすると、その要素が sortable2 に複製されます。sortable1 にドロップされると、ユーザーはそれを sortable2 に戻すことはできません。これは、代わりに別のものが既に存在するためです。
私の質問は基本的に 2 つあります。
- sortable1 にドロップされたアイテムが、再配置できる状態で sortable2 にドラッグされて戻らないようにするにはどうすればよいですか。
- クリックしたソート可能な要素を削除するように、クリック機能を実装するにはどうすればよいですか。この動作は sortable1 でのみ発生します。
スクリプトは次のとおりです。
<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
$( "#sortable2" ).sortable({
connectWith: ".connectedSortable",
helper: function(e,li) {
copyHelper= li.clone().insertAfter(li);
return li.clone();
}
}).disableSelection();
});
</script>
リストの背後にある html のスニペットは次のとおりです。
<div id="symbolbay">
<p>Drop symbols here</p>
<ul id="sortable1" class="connectedSortable"></ul>
</div>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Click me to delete only me</li>
<li class="ui-state-highlight">Click me to delete only me</li>
...There are a whole bunch more, finally ending in...
</ul>
助けてくれてありがとう!私はこの驚くべき技術を初めて知り、その可能性に常に驚かされています。