0

JQuery UIを使用して、JavaScriptで簡単なアセンブリ言語エディターを作成しています。命令セットから命令をドラッグして、ソート可能なプログラムにドロップできるようにしたいと思います。

ただし、編集可能なパラメーター（オペランド）を使用するには、命令セットを単語（オペコード）のリストとして表示し、ドロップしたときに変更する必要があります。

ドラッグ可能な命令セットでカスタムヘルパーを使用してみましたが、ドラッグするとすぐに命令が変更されますが、ドロップすると元の形式に戻ります。ドロップされた命令のDOMを更新するために、「update」などのソート可能ファイルでドロップイベントを使用しようとしていますが、命令が新しく、並べ替えられただけではない場合にのみこれを行う方法が見つかりません。

つまり、ソート可能で新しくドロップされたアイテムのDOMを変更する方法を知る必要があります。

4

1 に答える 1

1

receiveイベントを使用してみましたか？

$('#list1').sortable({
  connectWith:'#list2',
  receive: function(e, ui){
    ui.item.addClass('new');
  }
});

このフィドルは、受け取った要素にクラスを追加する方法を示すために作成しました。

#list2要素を上にドラッグする#list1と、新しいクラス/青い背景が表示されます。ただし、既存のアイテムを単に並べ替えただけでは、何も起こりません。新しいアイテムを並べ替えても、何もしません。クラス/青の背景色を維持します。例として簡単なため、クラスを追加することにしましたが、アイテムを受け取ったら、オペランドを入力するための入力フィールドを作成するなど、必要なことは何でもできます。

それは役に立ちますか？

編集：リスト内の元の要素を保持する必要がある場合は、これを試してください

$('#list2').sortable({
  connectWith:'#list1',
  remove: function(e, ui){
    ui.item.clone().appendTo('#list1').addClass('new');
    $(this).sortable('cancel');
  }
});

リストの最後に項目を追加します（追加）が、少し調べれば、それを正しく配置する方法を理解できると確信しています。

于 2013-02-04T16:48:24.507 に答える