內部div可垂直拖動，應該允許父div水平拖動

我有一個外部div和一個內部div。內部div可以垂直拖動，外部div可以水平拖動。我做到了這一點（http://jsfiddle.net/27Nh2/）內部div可垂直拖動，應該允許父div水平拖動

現在我也想要外部股利水平拖動，如果用戶試圖水平拖動內部股利。內部div應該保持在外部div內部，而外部div水平拖動。

問題是如果我嘗試水平拖動內部的div，沒有任何拖動。

<div class="slides"> 
    Outer - only drag horizontally 
    <div class="slide"> 
     Inner - only drag vertically 
    </div> 
</div> 

.slides { 
    margin:20px; 
    background-color:#aaa; 
    cursor:pointer; 
    width:200px; 
    height:100px; 
} 
.slide { 
    width:100px; 
    height:200px; 
    margin:20px; 
    background-color:#ccc; 
} 

$(".slides").draggable({ 
    axis:"x", 
}); 
$(".slide").draggable({ 
    axis:"y", 
});

來源

2014-02-13 rosewater

只是爲了澄清，你想要的元素一起移動，但限制其移動到X和Y軸。因爲否則'.draggable（）'本身可以讓你通過單擊來移動它們。 – badAdviceGuy

外部元素僅限於水平拖動，內部元素限於垂直拖動。當你點擊內部元素時，如果外部元素位於內部元素後面，你應該可以進行水平拖動。而內部元素的位置是相對於外部元素的位置，所以如果外部元素水平拖動，內部元素將與其一起行進。 – rosewater

這裏是一個解決方案，它可以爲你工作。根據我的理解你的目標，這將使元素保持在一起，但將它們限制在一個軸上或另一個軸上。

Demo Fiddle

JS：

$(".slides").draggable({ 
    axis:"x", 
}); 

$('.slide').hover(
    function() { 
     $('.slides').draggable({axis:'y'}); 
    },function() { 
     $('.slides').draggable({axis:'x'}); 
    });

來源

2014-02-13 15:27:00 badAdviceGuy

我對此有其他解決方案。當內DIV水平拖動它可能無法在同一時間，但通過利用手柄選項，您也可以將外部的div移動內部的div x和y軸：

<div class="slides"> 
<div class="slide"> 
    <p id="hd" style="border:2px solid;">Vertical</p> 
    Hello World (horizontal) 
</div>

$(".slides").draggable({ 
    axis:"x", 
}); 
$(".slide").draggable({ 
    axis:"y", 
    handle:"p" 
});

更新您的Fiddle

來源

2014-02-13 06:15:21 MrNobody

感謝Pruthvi。這接近我想要的。但我需要一種方式讓內部的「.slide」不處理水平拖動事件並將其傳遞給父級「.slides」，以便它可以處理它。 – rosewater

@rosewater通過創建句柄，我限制了內部div可拖動，因此，無論何時拖動內部div的其餘部分（句柄除外），那麼它都將被視爲父級div拖動事件。 – MrNobody

我用你的答案（badAdviceGuy）得到我想要的東西，有一些修改。

現在內部div向上/向下滑動，當您位於內部div內時，您還可以向左/向右滑動外部潛水。

謝謝。

我更新了的jsfiddle（http://jsfiddle.net/27Nh2/52/）

var left = 0; 
$(".outer").draggable({ 
    axis:"x", 
    drag: function(event, ui) { 
     left = ui.position.left; 
     $('#msg').html(ui.position.left); 
    } 
}); 
$(".inner").draggable({ 
    axis:"y", 
    drag: function(event, ui) { 
     $('#msg').html(left + ui.position.left); 
     $(".outer").css("left", left + ui.position.left); 
    }, 
    stop : function(event, ui) { 
     left = ui.position.left; 
    } 
});

來源

2014-02-14 15:00:33 rosewater

內部div可垂直拖動，應該允許父div水平拖動

回答

相關問題