web-dev-qa-db-ja.com

jQueryUIソート可能リストと2つの接続リスト

私はjQueryとSortableで以下をまとめようとしています：私がつかむ必要がある2つのケースがあります：

  • A：同じリスト内のアイテムを移動する
  • B：あるリストから別のリストにアイテムを移動する

ケース[〜＃〜] b [〜＃〜]は、receiveイベントのみを使用すると解決されます。しかし、receiveとstopの両方をバインドすると、アイテムをあるリストから別のリストに移動するときに両方とも発生します。これにより、ケース[〜＃〜] a [〜＃〜]をキャプチャできなくなります。これは、アイテムが別のリストから、または同じリスト内に移動しました。それが理にかなっていることを願っています。

私のユースケースが最もよく使われていると思うので、これはちょっと奇妙です。

私はアイデアを切望しています。試してみたい場合は、 http://jsfiddle.net/39ZvN/5/ を参照してください。

HTML：

<div id="list-A">
  <ul class="sortable">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>
<br />
<div id="list-B">
  <ul class="sortable">
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
  </ul>
</div>

JS：

$(function() {
  $('.sortable').sortable({
    stop: function(event, ui) {
      // Wird auch aufgerufen wenn von Liste X nach Liste Y gezogen wird
      if(!ui.sender) alert("sender null");
      else alert("sender not null");
    },
    receive: function(event, ui) {
      // Funktioniert top, damit kann ich Fall B abfangen
      alert("Moved from another list");
    },
    connectWith: ".sortable"
  }).disableSelection();
});
jqueryeventsjquery-uidrag-and-dropjquery-ui-sortable
14
balu

これは興味深いことに仕事をします。キャンセルするとアイテムが元のリストに戻ると思っていたのですが、receiveイベントは非常に遅く発生し、他のイベントの発生を停止します。お役に立てれば。 この解決策は機能しませんでしたが、私はそれを見ることができないほど愚かでした。前のコードはまったくナンセンスなので削除しました。

これは、いくつかのイベントを使用して状態を追跡する実用的なソリューションです。

$(function() {
    var oldList, newList, item;
    $('.sortable').sortable({
        start: function(event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent().parent();
        },
        stop: function(event, ui) {          
            alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
        },
        change: function(event, ui) {  
            if(ui.sender) newList = ui.placeholder.parent().parent();
        },
        connectWith: ".sortable"
    }).disableSelection();
});

http://jsfiddle.net/39ZvN/9/

31
balu

これがあなたが望んでいたことだと思います http://jsfiddle.net/39ZvN/6/

基本的に、ソート可能なコマンドを分離し、各ULにIDを与える必要があります。

3
brett

私も同じものを探しています...しかし、上記のすべてのソリューションは私が望むように機能していません。 jquery-uiに接続された並べ替え可能なリストから、アイテムが1つから別のリストに移動した場合、2つのリストのserialize/toarray値を取得します。

最後に、更新という単一の方法でそれを理解します。

function getSortableOrder(sortableList,ui){
  var listItems = {}
listItems['sortable'] = sortableList.sortable('toArray');
  if(ui.sender!=null)
    listItems['sender'] = ui.sender.sortable('toArray');
  console.log(listItems);
}
$('.sortable[sortable="true"]').sortable({
                    connectWith:".sortable",
                    placeholder: "ui-state-highlight",
                    update: function(ev, ui) {
                      getSortableOrder($(this),ui);
                    }
                });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="list-A">
    <ul id='sort1' sortable="true" class="sortable">
        <li id="1.1">item 1</li>
        <li id="1.2">item 2</li>
        <li id="1.3">item 3</li>
    </ul>
</div>
<br />
<div id="list-B">
    <ul id='sort2' sortable="true" class="sortable">
        <li id="2.1">item 4</li>
        <li id="2.2">item 5</li>
        <li id="2.3">item 6</li>
    </ul>
</div>
2
BEJGAM SHIVA PRASAD

あなたがやろうとしていることIS非常に一般的なユースケース。それが、これを達成するための非常に簡単な方法がある理由です。

$（ '＃list-A、＃list-B'）。sortable（{connectWith： '。sortable'}）;

これですべてです。

JQuery UIのドキュメントページに説明があるライブの例を次に示します。 http://jqueryui.com/demos/sortable/#connect-lists

1
Aaron Hill