2

私のフィドルhttp://jsfiddle.net/meridius/95Wej/のように、プログラムで (コードだけで、ユーザーの操作なしで) 対応するドロップ可能オブジェクトに移動したい要素 (ドラッグ可能オブジェクト) がいくつかあります。これは私ができる。

私が知らないのは、.droppable("drop") イベントが発生しない理由です。
ドラッグ可能であることを登録するには、ドロップ可能が必要です。それ以外の場合 (私のより複雑な設定では)、ユーザーがそのドラッグ可能を移動すると、奇妙な動作が発生します。

の後.trigger("mousemove"), mousedownに再初期化しようとしましたが、どれも役に立ちませんでした。.droppable().position()

編集: 「奇妙な」動作は、を呼び出す前に絶対に設定することで解決した、を
維持することによって引き起こされました。 それにもかかわらず、なぜイベントが発生しないのかという疑問が残ります。position:relative;.position()

4

2 に答える 2

2

sのドロップイベント ハンドラdroppableは少し奇妙です。次のように、ドロップdroppableイベントのイベント ハンドラーでを初期化する場合:

$('div.droppable').droppable({drop: dropFn});

ThendropFnは、要素が にドロップされたときに呼び出される唯一の関数であり、メソッドdroppableだけを使用して呼び出すことはできません。.trigger代わりに、ドロップ関数のイベント ハンドラーなしで を初期化し、後でドロップdroppableイベントのイベント ハンドラーを次のようにバインドする必要があります。

$('div.droppable').droppable().on('drop', dropFn);

ユーザーが開始したドロップは影響を受けませんが、コードでドロップ イベントをトリガーできるようになりました。これを行うときは、ここでui説明されているオブジェクトの代わりを次のように提供する必要があります。

$('div.droppable').first().trigger('drop', {draggable: ..., helper: ...});

の位置を「相対」に設定し、動的に ( への呼び出しを使用してdraggable)に次の CSS を設定して、を に移動します。droppabledroppable.cssdraggable

div.draggable {
    position: absolute;
    left:     0;
    top:      0;
}

そして、 をデタッチして に追加draggableしますdroppable:

$('div.draggable').first().detach().appendTo($('div.droppable').first());

この答えは私を助けました: https://stackoverflow.com/a/21279352/1852838。

私の例では、常に最初のdraggableorを使用しましたdroppableが、これを特定のアプリケーションに合わせて簡単に調整できるはずです。

于 2014-10-30T22:46:25.783 に答える