10

jQueryをドラッグ可能にして、上下左右にまっすぐドラッグする方法があるかどうか疑問に思っています。ユーザーが div を斜めにドラッグできないようにしたい。私の状況では、ドラッグ可能な UI でグリッド オプションを使用することはできません。

http://jqueryui.com/demos/draggable/#constrain-movement

これはどのように可能ですか？

ありがとう！

4

5 に答える 5

9

jQueryUI は、固定トラックでのドラッグを制御するための 2 つの方法をサポートしています。

  1. 軸オプションを使用して、特定の軸でのドラッグ動作を制限できます。例えば：

    $('.draggable_horiz').draggable({axis: "x"});

    詳細はこちら: http://api.jqueryui.com/draggable/#option-axis

  2. バウンディング ボックスを定義する x/y 座標の要素または配列を使用して、動きを制限できます。

        $('.draggable_track').draggable({ containment: [0,0, 250, 24] });

or to just use the parent element as a reference track:

    $('.draggable_track').draggable({ containment: 'parent' });

    詳細はこちら: http://api.jqueryui.com/draggable/#option-containment

これが役立つことを願っています。

于 2013-08-19T20:21:46.967 に答える
8

両方の軸でドラッグ可能なものを移動できるプラグインを作成しました。これで仕事は完了しますが、単純な jQuery プラグインではなく、 jQuery UI ウィジェットとして実装する方が適切です。

ホスティングされたデモ: http://jsbin.com/ugadu/1 ( http://jsbin.com/ugadu/1/editで編集可能)

プラグイン コード:

$.fn.draggableXY = function(options) { 
  var defaultOptions = { 
    distance: 5, 
    dynamic: false 
  }; 
  options = $.extend(defaultOptions, options); 

  this.draggable({ 
    distance: options.distance, 
    start: function (event, ui) { 
      ui.helper.data('draggableXY.originalPosition', ui.position || {top: 0, left: 0}); 
      ui.helper.data('draggableXY.newDrag', true); 
    }, 
    drag: function (event, ui) { 
      var originalPosition = ui.helper.data('draggableXY.originalPosition'); 
      var deltaX = Math.abs(originalPosition.left - ui.position.left); 
      var deltaY = Math.abs(originalPosition.top - ui.position.top); 

      var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag'); 
      ui.helper.data('draggableXY.newDrag', false); 

      var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax'); 
      ui.helper.data('draggableXY.xMax', xMax); 

      var newPosition = ui.position; 
      if(xMax) { 
        newPosition.top = originalPosition.top; 
      } 
      if(!xMax){ 
        newPosition.left = originalPosition.left; 
      } 

      return newPosition; 
    } 
  }); 
};
于 2009-10-19T12:41:37.467 に答える
4

ドラッグイベントを有利に使用する

$('.selector').draggable({
   drag: function(event, ui) { ... }
});

方法は 100% わかりませんが、ここで座標を確認できます。~jack-laplante が言ったように、ここで比較します。座標が y 軸よりも x 軸に近い場合は、軸を x に変更します

//setter
$('.selector').draggable('option', 'axis', 'x');

逆の場合は y に変更します。これにより、アイテムが常に (開始点から) x 軸または y 軸のいずれかに配置されるスナップ動作が得られます。軸が (x+n,y+n) の場合、アイテムをどこにでも残すためにチェックを行う必要がありますが、誰かが |x| に数ピクセル以上残っている場合はかなり印象的です。 =|y| ライン。

軸が常に元の開始位置にとどまるかどうか、またはドラッグ可能なアイテムがドラッグの開始点にある場所に応じて変化するかどうかを指定しませんでした (少し動かしてから離し、さらにドラッグしようとした場合など)。 . start: と end: イベントもあり、その部分に役立ちます。

斜めに移動することはできませんが、左、右、上、下に移動できるものを正確にドラッグしようとしていますか?

于 2009-10-17T01:30:07.170 に答える
2

オブジェクトの jqueryui 呼び出しだけでは不可能であると言って、多くのことをいじった後、この回答を投稿しています。既にドラッグしている間は、拘束軸を変更することはできないようです。

私が間違っていることを証明してください。

于 2009-10-18T16:36:15.167 に答える
1

正確なコードはありませんが、問題についてもう少し深く考える手助けをすることで、正しい方向に導くことができるかもしれません。

そのため、ユーザーは制約のないオブジェクトをドラッグし始めます。オブジェクトが開始点から 1 ピクセル離れて移動すると、最初のピクセルが次の 4 つの ( x , y ) 座標のいずれかにある場合、 xとyは開始点: ( x -1, y -1)、( x -1, y +1),( x +1, y -1) または ( x -1, y +1), ユーザーがどちらに行こうとしているのかはまだ不明です. たとえば、オブジェクトが1つ下にある場合左側では、拘束を x 軸に配置するか y 軸に配置するかを判断できません。

1 ピクセル以上離すと、簡単になります。ただし、上記の座標のように、 abs( xoffset ) == abs( yoffset ) のピクセル座標で丸めを行う必要があります。次に、x および/または y 距離が任意の小さな整数よりも大きい、たとえば「3」。

次に対処すべき問題は、軸コンストレイントが最後に起動されてから、ユーザーが軸を変更できるようにするまでの距離です。グリッド効果が必要だと思うので、制約を削除してユーザーがドラッグしたい次の「方向」を探す前に、移動したピクセル数のしきい値を設定する必要があります。

これは興味深い挑戦であり、やり方がわかれば良い学習体験となります。

于 2009-10-15T16:23:43.927 に答える