0

このjsfiddleを参照してください：

http://jsfiddle.net/5hBQ4/2/

これにより、誰かが商品を在庫または棚に置くことができるようになります。同じ記事のペアを2回移動すると、目標位置が本来の2倍になっていることがわかります。

私は物事を正しくやっていないと感じています。これを行うためのクリーンな方法が必要です。どんなアイデアでも歓迎します:-)

4

1 に答える 1

2

概要

コードを見てから、別のアプローチを見つける必要があります。（絶対ではなく）要素の相対的な配置に依存しているため、デルタ計算では非常に奇妙な結果が得られます。とにかく別のアプローチを実装します。作成したものが視覚的に望むことを実行する可能性があるとしても...記事の座標を変更するだけなので、どの記事がどの地域にあるかを検出する良い方法がありません。 ..最終的にはコンテナではありません。これにより、ユーザーが配置作業を終了した後に記事に対して何かを行う必要がある場合に問題が発生します。

私だったら...

あるULリストから別のULリストにアイテムを物理的に（つまりDOM内で）移動できるようにするドラッグアンドドロップインターフェイスを実装します。ドラッグアンドドロップするときは、すぐにアイテムを切り替える必要があります。必要に応じて、2つの間で優れたアニメーションを計算できますが、アニメーションは実際にはセカンダリである必要があります。アニメーションを計算するときは、相対座標ではなく絶対座標を読み取っていることを確認する必要があります...これは$().offset()、$().position()

次のようなDOM構造を使用します。

<ul class="shelf">
  <li class="article">Article I</li>
  <li class="article">Article II</li>
  <li class="article">Article III</li>
</ul>

<ul class="stock">
  <li class="article">Article IV</li>
  <li class="article">Article V</li>
  <li class="article">Article VI</li>
</ul>

次に、ドロップイベントが記事で発生した場合は、次のことを行う必要があります。

/// create a temporary element to hold our reciprocal position
var placeholder = $('<li class="placeholder"></li>');

/// insert the placeholder before the item we dragged
ui.draggable.before(placeholder);

/// now move off our dragged item and place it just before our drop item
ui.draggable.insertBefore(this);

/// now place our drop item in the DOM after our placeholder
placeholder.after(this);

/// get rid of the placeholder
placeholder.remove();

明らかに、これは切り替えが瞬時に行われることを意味します...しかし、これをベースモデルとして使用すると、アニメーションを作成できるはずです-.offset（）を使用して、ドロップアイテムとドラッグアイテムの両方の絶対位置を計算します-どちらもアニメーション化できます偽のスイッチオーバー（視覚的な利益のためだけに）...または、インスタントスイッチオーバーを遅らせ、移動するアイテムをアニメーション化してから、ドーム内のアイテム交換場所でファイナライズすることができます。

その他のポイント

event.srcElement

する必要があります：

event.target

srcElementはInternetExplorerのみであり、jQueryを使用しているため、jQueryはInterner Explorerの.target属性の作成を自動的に処理します。したがって、よりサポートされている属性を使用することをお勧めします。さらに良いことeventに、ドロップターゲットを取得するためにオブジェクトにアクセスする必要はありません。これは、$(this)

于 2012-09-10T14:04:49.307 に答える