jQueryドラッグ可能にするだけで、まっすぐ上下にドラッグできるようにする方法があるのだろうかと思います。私は、ユーザーが斜めにdivをドラッグしないようにしたい。私の状況では、ドラッグ可能なUIでグリッドオプションを使用することはできません。固定X軸とY軸でjQueryをドラッグ可能にする方法は?
http://jqueryui.com/demos/draggable/#constrain-movement
どのようにこれは可能ですか?
ありがとうございます!
jQueryドラッグ可能にするだけで、まっすぐ上下にドラッグできるようにする方法があるのだろうかと思います。私は、ユーザーが斜めにdivをドラッグしないようにしたい。私の状況では、ドラッグ可能なUIでグリッドオプションを使用することはできません。固定X軸とY軸でjQueryをドラッグ可能にする方法は?
http://jqueryui.com/demos/draggable/#constrain-movement
どのようにこれは可能ですか?
ありがとうございます!
私は両方の軸でdraggableを動かすことができるプラグインを書いています。ジョブは完了しますが、シンプルなjQueryプラグインではなく、jQuery UI widgetとして実装する方がよいでしょう。デモホステッド
:(http://jsbin.com/ugadu/1/edit介して編集可能)http://jsbin.com/ugadu/1を
プラグインコード:
これは興味深いようですが、あなたのリンクは機能しません。理由を見つけることができません... –
Argh!申し訳ありませんが、Firebugを開いていない限り、そこにデバッグ行を作成しました。私はそれを修正し、答えのリンクを変更しました。 – brianpeiris
私はイージングでドラッグをサポートするために、次のスレッドでコードの修正版を作成しました。数年前に書いた素晴らしいコードです。http://stackoverflow.com/questions/6398854/jquery-draggable-with-ease – DarthJDG
私はあなたのための正確なコードがありませんが、私はあなたが少し深く問題について考えるのを助けることによって正しい方向にあなたを指すことができるかもしれません。
したがって、ユーザーは拘束されていないオブジェクトをドラッグし始めます。オブジェクトが最初のピクセルは、これら四つのいずれかである場合(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」よりも大きいかどうかを判定する。
次の問題は、軸の制約の最後の発射からユーザーが軸を変更できるようにしたいことです。グリッドエフェクトが必要だと思うので、制約を削除してドラッグしたい次の「方向」を探す前に、ピクセル数移動しきい値を設定する必要があります。
これは、あなたがそれを行う方法を見つけ出すと面白い挑戦であり、良い学習体験です。
は確かにどのように私は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 |ライン。
軸が常に元の位置に残っている場合、またはドラッグ可能なアイテムがドラッグ開始位置に応じて変化するかどうかを指定していません(少し移動してから離してもう少し)。そこには始まりがあります:そして、終わり:イベントも、その部分であなたを助けることができます。
正確にドラッグしようとしているものは斜めにならないが、左、右、上、下に移動できますか?
入力いただきありがとうございます!私は、ユーザーが次の画像に移動するために画像をドラッグする画像ギャラリーを作成しています。ユーザーがイメージを上または下にドラッグすると、小さな情報テキストが表示されます。 –
というだけで、私はこの回答を投稿しています。 jqueryuiがオブジェクトを呼び出しています。既にドラッグしている間は拘束軸を変更することはできないようです。
私が間違っていることをご存じですか?
これは、カスタムのドラッグイベントリスナーを使用してui.positionオブジェクトを更新することが可能である必要があります。このメソッドの詳細については、[この回答](http://stackoverflow.com/a/16131457/289203)を参照してください。 –
$.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つのメソッドをサポートします。
軸オプションを使用すると、 特定の軸のドラッグ移動を制限できます。例えば:ここで
$('.draggable_horiz').draggable({axis: "x"});
あなたは、要素または境界ボックスを定義する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
私はこのことができます願っています。
オブジェクトを左右、上下にドラッグすることができます...斜めにドラッグできないのですか?またはあなたは「開始位置」からだけ話していますか? IE、あなたが0,0から始まり、0、-3を越えるポイントに移動すると突然あなたは垂直のみに拘束されますか? – snicker
はい、それは私が達成したいことです。 –
さて、私はそれを正しく行うためのコードを書いて、JQueryはドラッグされている間に軸を変更することはできません。 – snicker