2

コンテナ div に 4 つの div があります。4 つの div のコンテンツを垂直にドラッグできるようにしたいだけでなく、4 つの div すべてのコンテナーを水平にドラッグできるようにしたいと考えています。次のようなもの..

http://imgur.com/L4trY6F

またはここに見られるように: http://jsfiddle.net/PuVCz/

問題は、最初の 2 つの div をクリックすると上下にドラッグでき、右側の 2 つの空の div をクリックすると左右にドラッグできますが、最初の 2 つの div をクリックするとロット全体を水平方向に移動できないことです。 jqueryは、コンテンツの上下の動きを制御しようとしていると考えています。

これを達成するためにドラッグ可能を使用する方法はありますか?

PSスタックオーバーフロー送信システムを喜ばせるためのコードがいくつかありますが、写真またはJSFは私が意味することをよりよく示しています

$(function() {
    $( "#content" ).draggable({axis: "x" });
    $( ".fredcontent" ).draggable({axis: "y" });
});
4

3 に答える 3

1

私は同じ問題を抱えていました..

私の解決策は、移動の方向であるドラッグ状態になることでした。

start: function(e, ui) {
                // get the start x coords to detect horizontal scroll
                start = ui.position.left;
                outerDragStartPos = parseInt(outerDrag.css('left'));
...

drag : function(event, ui){
                // if horizontal scroll
                if(ui.position.left != start){

方向が垂直だった場合、興味深いことは何も起こりません。

ただし、スクリプトが x 軸の動きを検出した場合は、「スクロール x 動作」を無効にし、代わりに外側のコンテナーを移動します。

   // disable horizontal scroll for the internal container
   innerDrag.draggable( "option", "axis", "y" );

   // moving delay
   if(ui.position.left > 30 || ui.position.left < -30){
        outerDrag.css('left',outerDragStartPos + ui.position.left+"px");

それがどのように見えるかを示すためにフィドルを作りました。

少しでもお役に立てば幸いです。^‿^

于 2013-03-13T11:16:17.730 に答える
0

これを行う方法を作成しました。基本的に、すべての子要素にドラッグ アンド ドロップを適用し、X 軸を横切ってドラッグすると、親の X 座標が変更されます。ここではフィドルです。

これを親要素に追加するだけです

$('#parent').doubleDragOnXY();

まず、 #parent に属する各子要素に .draggable() 関数を適用します

var children = $(this).children();

        children.draggable({..})

次に、ドラッグ プロパティで、X 軸または Y 軸を横切ってドラッグしているかどうかをテストします。X 軸を横切ってドラッグする場合は、親の「左」CSS 属性を新しい位置に設定します。Y 軸を横切ってドラッグすると、新しい位置が返されます。

if (xMax) {
   var newLeft = parentStart + newPosition.left;
   $(this).parent().css({
      left: newLeft
   });                   
   newPosition.top = originalPosition.top;
   newPosition.left = originalPosition.left;
}
if (!xMax) {
   newPosition.left = originalPosition.left;
}
return newPosition;

このフィドルで確認してください。 http://jsfiddle.net/Dtwigs/mRPuv/

psこのコードは、スタックオーバーフローで見つけた別の例に大きく影響を受けていますが、例を見つけたり覚えたりすることはできません。基本的に、1 つのオブジェクトを Y 方向または Y 方向に移動できるようにしていましたが、同時に両方を移動することはできませんでした。

于 2013-02-13T19:26:12.153 に答える
0

ここにあなたのための実用的なフィドルがあります。トリックは、#content スペースの一部を表示して、水平方向にドラッグできるようにすることでした。また追加

.fredcontent{
    height:100%;
}

空のdivを水平にドラッグできるようにします。以前は 100% の高さではなかったので、2 つの空の div を左右にドラッグするのは

$( "#content" ).draggable({axis: "x" });

ではない

$( ".fredcontent" ).draggable({axis: "y" });
于 2013-02-01T07:41:40.820 に答える