7

そのままで問題なく動作するドラッグアンドドロップコードがいくつかあります。少しだけ質問があります。デバッグ目的でドロップ関数内にアラートを追加すると (例: alert(draggedItem.text());)、ドラッグ可能な領域に何かをドロップするとアラートが 2 回発生することに気付きました。別の投稿で、ドロップ可能とソート可能を一緒に使用すると、この奇妙な二重イベントが発生することを読みました。しかし、ドロップ可能なイベントを使用して、ドラッグされた項目オブジェクト (ui.draggable) を取得する必要があります。これは、ドロップしたときに操作できるようにするためです。ドラッグ可能なオブジェクトを取得する他の方法がある場合は、教えてください:) また、なぜこれが起こるのかについての説明があれば、それは興味深いでしょう...

$(".field > li").draggable({
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
});

$(".dragrow").droppable({
    drop: function(e, ui) {
        draggedItem = ui.draggable;
        //alert(draggedItem.text());
    }
}).sortable({ //code here to do stuff with 'draggedItem'

これに関連する別のクエリもありますが、コードが非常に大きいため、ここにすべてを投稿することはできません。ですから、あなたが助けられない場合は理解しています-何かが頭に浮かんだら、それは本当にクールです. 基本的に、複数の行にドラッグできる「ブロック」のリストがあります。トグル イベントを使用して、個々の行を非表示にすることができます。3 つの行がある場合、ブロックをそれらのいずれかにドラッグできます。最初の行を非表示にすると、他の 2 つの行にドラッグできなくなります。私はまだそれらを並べ替えることができます。そして、並べ替えを開始すると、再びドラッグできるようになります。変...

4

2 に答える 2

3

デモhttp://jsfiddle.net/yeyene/FUyTe/1/を確認してください

あなたが言ったように、はい、droppable と sortable を一緒に使用すると、この奇妙な二重イベントが発生します。ただし、引き続き を使用したい場合はdraggedItem object、これを sortable receive オプションで使用できます。

またui.item、現在ドラッグされている要素を取得するために使用できます。

各アラートにコメントを付けたり外したりしてみてください。これで、アラートが 1 回だけ発生するようになりました。

$(".field > li").draggable({
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
});

$(".dragrow").droppable({
    drop: function(e, ui) {
        draggedItem = ui.draggable;
    }
}).sortable({ 
    receive: function(e, ui) {
        // here is the draggedItem object of "droppable"
        alert(draggedItem.text());

        // here is the draggedItem object of "sortable"
        draggedItem2 = ui.item;
        //alert(draggedItem2.text());
    }
});

ドロップされた要素の html を変更する 1 つの方法を次に示します。

デモhttp://jsfiddle.net/yeyene/7fEQs/8/

于 2013-07-09T06:47:09.737 に答える
-1

サイトで jquery スクリプト タグが 2 回使用されていないことを確認しましたか?

于 2010-08-23T15:21:12.630 に答える