2

ドラッグ可能でもあるドロップ可能内にオブジェクトをドラッグしています。オブジェクトをドロップすると、ドロップ可能オブジェクト内にネストされます。同様に、オブジェクトをドロップ可能の外にドラッグすると、ネストされなくなります。

ただし、ドロップ可能なものを定期的にドラッグインおよびドラッグアウトすると、ドラッグ可能なものは別の位置に配置されます。

コードはhttp://jsfiddle.net/sandeepy02/kTAL3/41/にあります

オブジェクト「部屋」を作成し、「テーブル」をそこにドラッグすることで、問題を再現できます。次に「部屋」を動かすと「テーブル」も一緒に動きます。ただし、「テーブル」を部屋の外にドラッグしてから、「テーブル」をドラッグインおよびドラッグアウトすると、突然再配置されます。

EDIT ドラッグしたアイテムをドロップ可能に追加するために使用しているコードを明確にするために、次のようにします。

.droppable({
            drop: function(event, ui) {
                $(this).append(ui.draggable);
            },
            out: function(event, ui) {
                $("#boundaryContainer").append(ui.draggable);
            }

ドロップインとドロップアウトの前にドラッグ可能な位置を保存するさまざまな方法を試しましたが、うまくいきませんでした。方法は次のとおりです。 方法 1:

.droppable({
            drop: function(event, ui) {
                var position = ui.draggable.offset();
                ui.draggable.appendTo($(this)).css(position);
            },
            out: function(event, ui) {
                var position = ui.draggable.offset();
                ui.draggable.appendTo("#boundaryContainer").css(position);
            }

方法 2:

.droppable({
            drop: function(event, ui) {
                var tempLeft= ui.draggable.position().left;
                var tempRight= ui.draggable.position().right;
                $(this).append(ui.draggable);
                ui.draggable.position().left = tempLeft;
                ui.draggable.position().right= tempRight;
            },
            out: function(event, ui) {
                var tempLeft= ui.draggable.position().left;
                var tempRight= ui.draggable.position().right;
                $("#boundaryContainer").append(ui.draggable);
                ui.draggable.position().left = tempLeft;
                ui.draggable.position().right= tempRight;
            }

方法 3 :(

http://jsfiddle.net/sandeepy02/kTAL3/53/

4

1 に答える 1

0

ここでの問題は、2番目のドラッグ可能オブジェクトをドロップ可能オブジェクトにアタッチした後、それがその一部になることです。ここでの許容値はデフォルトであり、ドラッグカーソルは再配置されません。したがって、内側の要素をドラッグしているかどうかに関係なく、カーソルは常にその上にあり、その親要素の一部であるため、実際には親要素を離れることはありません。この場合、アウトは決して発火しません。

私があなたのフィドルに加えたわずかな変更でその振る舞いをテストすることができます。（変更はcursorAt: { top: -10, left: -10 }2番目のドラッグ可能オブジェクトにあります。ドラッグ可能オブジェクトを親コンテナに追加すると、要素が再配置されるため、期待どおりに機能しないことに注意してください。ドロップ可能オブジェクトを保持することを検討する必要があります。また、ドラッグ可能なオブジェクトは2つの別々の親コンテナにあります。これは、ドラッグ可能なオブジェクトを切り離したときに、同じ親コンテナにアタッチされたときに、それらが相互に相対的に再配置されるという問題が発生しないためです。

于 2012-09-13T11:07:47.260 に答える