2

jQuery に 2 つの並べ替え可能なリストがあります。それらは sortable1 および sortable2 と呼ばれます。それらは <ul> の <li> です。ユーザーが要素を sortable2 から sortable1 にドラッグすると、その要素が sortable2 に複製されます。sortable1 にドロップされると、ユーザーはそれを sortable2 に戻すことはできません。これは、代わりに別のものが既に存在するためです。

私の質問は基本的に 2 つあります。

  1. sortable1 にドロップされたアイテムが、再配置できる状態で sortable2 にドラッグされて戻らないようにするにはどうすればよいですか。
  2. クリックしたソート可能な要素を削除するように、クリック機能を実装するにはどうすればよいですか。この動作は 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>

助けてくれてありがとう！私はこの驚くべき技術を初めて知り、その可能性に常に驚かされています。

4

2 に答える 2

1

おそらく、これを 2 つの質問に分割する必要があります。＃2について：

$('#sortable1 .ui-state-highlight').click(function(){
  $(this).remove();
});
于 2012-12-08T23:24:06.140 に答える
0

次のコードを使用します (私の場合、@ChrisHerbert コードは機能しません)。

$("#sortable").on("click", "li", function () {
    $(this).remove();
});
于 2013-03-06T20:03:16.260 に答える