0

jqueryui のソート可能なプラグインを使用する場合、ドラッグを開始した後にマウスをドロップ位置に移動すると、マウスを離したときに何も上になくても、それを記憶してそこにドロップするという問題があります。

マウスを放したときにドロップ位置を超えていない場合、ドラッグされたポートレットが元の位置に戻るように、これを防ぐ方法はありますか?

4

1 に答える 1

1

不適切な割り当てを防ぐための回避策があります。コードはより複雑なので、必要に応じてこれを削除しました。

OVERイベントを使用して、ターゲットにホバークラスを追加します

over: function(event,ui){
  $(this).addClass('hover');
}

OUTイベントを使用して、ターゲットからホバークラスを削除します

out: function(event,ui){
  $(this).addClass('hover');
}

RECEIVEで、ターゲットにhave hoverクラスがない場合は、ソートをキャンセルします。キャンセルは、ソートが開始される前の状態にリストを戻します

receive: function(event,ui){
  if( !$(this).hasClass('hover')){
    $(this).sortable('cancel');
  }
}

これはまだもう1つの問題を残します。他のターゲットが最初にOVERイベントをトリガーするまで、ターゲットはOVERイベントに再度応答しません。

リストAアイテム1アイテム2

リストB

アイテム3

  1. 項目1をクリックして、リストBをドラッグします。リストBでOVERイベントがトリガーされます。
  2. リストBからアイテム1をドラッグし続ける：リストBでOUTイベントがトリガーされます
  3. リストAとリストBの両方がない場所でアイテム1を解放します。リストBでRECEIVEがトリガーされます（ただし、リストBにホバークラスがまだない場合は、並べ替えをキャンセルできます。これは、手順2でOUTによって削除されます。 。

このシーケンスは、想定されるターゲットをクリアする方法を示しています

  1. 項目1をクリックして、リストBをドラッグします。リストBでOVERイベントがトリガーされます。
  2. リストBからアイテム1をドラッグし続ける：リストBでOUTイベントがトリガーされます
  3. アイテム1をリストBに再度ドラッグし続けます：OVERイベントはトリガーされません
  4. アイテム1をリストAにドラッグし続けます。リストAでOVERイベントがトリガーされます。
  5. リストAからアイテム1をドラッグし続ける：リストAでOUTイベントがトリガーされます
  6. アイテム1をリストBに再度ドラッグし続けます。リストBでOVERイベントがトリガーされます

ターゲットを再びアクティブにするには、ユーザーがドラッグで余分な動きをする必要があるため、この最後の問題を回避する方法をまだ探しています（アイテム1をリストAからリストBにドラッグしたいが、オーバーシュートしてリストBが勝ったと仮定します） 2回目にMOVEをトリガーしないでください。つまり、ホバークラスを配置して、アクティブなドロップスポットであることを示すことができません。

結論として、sortableはOUTをトリガーしますが、RECEIVEをトリガーするドロップの場合でもターゲットを記憶し、また防止します

于 2012-09-24T07:37:17.990 に答える