0

ドラッグの開始時にドラッグ可能なヘルパー位置の位置を変更したいので、グリッドはドラッグ要素の新しい位置でカウントされます。

要素をドラッグすると、開始時に幅が変更され (ドラッグを開始)、グリッド [100x100] に「収まりません」。

start: function (event, ui) {
    ui.helper.css("width", '102px');
}

ここに例があります: http://jsfiddle.net/sYHre/73/

例でわかるように、青い要素はグリッドに完全に適合しますが、赤い要素はそうではありません。その場で位置を変更しようとしましたが、うまくいきません (コメントアウトされたコード)。オブジェクトがジャンプしています。jquery ui の一種のバグだと思います。多分これを行うためのより良い方法がありますか？

最新のjQueryおよびjQuery UI 1.9.2を使用しています

4

1 に答える 1

1

要素の幅は、元々は classtwoであったため、ドラッグを開始すると変更されwidth: 51pxますが、ドラッグを開始すると、start関数によって変更されui.helper.css("width", '102px')ます。幅を変更したくない場合は、その行を削除します。そのアイテムの幅を変更する以外に何もしていません。幅を変更したいが、「ジャンピネス」がなければ、変更をアニメーション化してよりスムーズにすることができます-ui.helper.animate({width: 102}, 500)うまくいくようです。それでも少し混乱しますが、特に理由がない限り、幅をまったく変更しないことをお勧めします。

オブジェクトはグリッドに収まりません。これは、クラスtwoが にあることを要求しているためですleft: 50%。これは、100 x 100 グリッドと完全には一致しません。グリッドに合わせて並べたい場合は、left: 504px代わりに に変更することで並べることができます。

一方、ドラッグを開始したいleft: 50%が、ドラッグを開始したら、最も近いコーナーにスナップする場合はsnap: '.target'、オプションのリストに追加します。これにより、最初はグリッドに整列していなくても、強制的にグリッドにスナップされます。(実際、必要に応じて を設定できますsnapTolerance: 100。この場合、グリッドは必要ありません。ドラッグ可能なオブジェクトは常にターゲット オブジェクトにスナップします)。

の使用を示す更新されたフィドルを次に示しますsnap。これは同じ fiddleですが、幅の変更がアニメーション化されているため、その動作を確認できます。

これがあなたの質問に答えたことを願っています。そうでない場合は、達成しようとしていることをもう一度正確に説明してください。

于 2013-02-12T20:38:18.840 に答える