固定X軸とY軸でjQueryをドラッグ可能にする方法は？

Question

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

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

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

ありがとうございます！

Answer 1

私は両方の軸でdraggableを動かすことができるプラグインを書いています。ジョブは完了しますが、シンプルなjQueryプラグインではなく、jQuery UI widgetとして実装する方がよいでしょう。デモホステッド

：（http://jsbin.com/ugadu/1/edit介して編集可能）http://jsbin.com/ugadu/1を

プラグインコード：

Answer 2

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

したがって、ユーザーは拘束されていないオブジェクトをドラッグし始めます。オブジェクトが最初のピクセルは、これら四つのいずれかである場合（X、Y）座標、離れた開始点から1つの画素を移動させるように、XとYが出発点である：（X -1、Y -1）、（X -1、Y +1）、（X+1、Y -1）または（X -1、Y +1 ）、それは、ユーザーがどんなやり方をするのかはまだ不明です。例えば、私はオブジェクトが1つ下にあり、左にある場合、制約がx軸かy軸にあるかどうかを判断することは不可能です。

一度複数のピクセルを移動すると、より簡単になります。しかし、上記の座標のようにabs（xoffset）== abs（yoffset）ピクセル座標を丸めなければならない場合は、xおよび/またはy距離が任意の小さな整数、例えば「3」よりも大きいかどうかを判定する。

次の問題は、軸の制約の最後の発射からユーザーが軸を変更できるようにしたいことです。グリッドエフェクトが必要だと思うので、制約を削除してドラッグしたい次の「方向」を探す前に、ピクセル数移動しきい値を設定する必要があります。

これは、あなたがそれを行う方法を見つけ出すと面白い挑戦であり、良い学習体験です。

Answer 3

は確かにどのように私は100％ではないんだけど、内部ここで、あなたは座標のチェックを行うことができますあなたの利点

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

にドラッグイベントを使用します。 〜jack-laplanteが言ったように、これはあなたが比較する場所です。座標がyよりx軸に近い場合は、他の方法の周りYに変更した場合、軸X

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

を変更します。これにより、常に始点からx軸またはy軸のいずれかにアイテムを移動させるような動きが得られます。軸が（x + n、y + n）であればどこにでもアイテムを残すためのチェックをしなければならないだろうが、もしx |に数ピクセル以上留まっていればかなり印象的だろう。 = | y |ライン。

軸が常に元の位置に残っている場合、またはドラッグ可能なアイテムがドラッグ開始位置に応じて変化するかどうかを指定していません（少し移動してから離してもう少し）。そこには始まりがあります：そして、終わり：イベントも、その部分であなたを助けることができます。

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

Answer 4

というだけで、私はこの回答を投稿しています。 jqueryuiがオブジェクトを呼び出しています。既にドラッグしている間は拘束軸を変更することはできないようです。

私が間違っていることをご存じですか？

Answer 5

$.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; 
    } 
    }); 
}; 

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

私はこのことができます願っています。