jquery UI在子div上可拖動的x軸，在父級上的y軸

我在容器div中有4個div。我希望能夠垂直拖動四個div的內容，但也能夠水平拖動所有四個div的容器。像下面..jquery UI在子div上可拖動的x軸，在父級上的y軸

問題是你可以拖動第一兩個div上下當你點擊裏面他們離開了一大堆權當你點擊右邊2個空格子裏面，但是當你點擊前兩個時，你不能水平移動整個區域，因爲jquery認爲你試圖控制內容的向上/向下移動。

有沒有使用可拖動的方式來實現這一點？

PS一些代碼來取悅堆棧溢出提交系統，但事先知情同意或JSF說明我的意思好得多

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

來源

2013-01-31 xgarb

Here是你工作的小提琴。訣竅是顯示一些＃內容空間，以便您可以水平拖動它。此外，還添加了

.fredcontent{ 
    height:100%; 
}

以便您可以水平拖動空的div。此前他們並沒有100％的高度，因此，兩個空的div的左側和右側拖動是的

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

，而不是

$(".fredcontent").draggable({axis: "y" });

來源

2013-02-01 07:41:40

嗨，謝謝你的回答。今天更清楚地思考它，我不認爲有可能做我想做的事情，因爲當你點擊div時，jquery使活動div不是父級，所以你只能垂直移動它。我將不得不在點擊水平移動（根據您的答案）之外的差距，但我希望divs並排。我將調查jquery mobile中的滑動方法。 – xgarb

當然，你不能在一個事件上有兩個單獨的行爲。此外，當拖動開始時，你不能告訴用戶要做什麼，即水平或垂直拖動。所以對你要求的東西很困難。 –

我得到了這個http://jsfiddle.net/swtvq/8/ jquery mobile的滑動。我想我可以將其用於我的項目。 – xgarb

我創建了一個辦法做到這一點。基本上，您可以將拖放應用於所有子元素，並且如果您拖動X軸，則會更改父級的X座標。這裏是小提琴。

只需添加到您的父元素

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

首先，它適用的.draggable（）函數到屬於子元素來#parent

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/

p.s.這段代碼深受我在棧溢出中發現的另一個例子的啓發，儘管我找不到/記住這個例子。基本上它允許一個對象在或Y上移動，但不能同時移動。

來源

2013-02-13 19:26:12 Danwilliger

我有同樣的問題..

我的解決辦法是在拖狀態得到的，移動的方向。

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");

我做了一個fiddle來展示它的樣子。

我希望它有一點幫助。 ^‿^

來源

2013-03-13 11:16:17 Hansinger

jquery UI在子div上可拖動的x軸，在父級上的y軸

回答

相關問題