内部 div 可垂直拖动，应允许父 div 可水平拖动答案

【问题标题】：Inner div dragable vertically, should allow parent div to be dragable horizontally内部 div 可垂直拖动，应允许父 div 可水平拖动
【发布时间】：2014-02-14 23:09:36
【问题描述】：

我有一个外部 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",
});

【问题讨论】：

只是为了澄清，您希望元素一起移动，但将它们的移动限制在 x 和 y 轴上。因为否则.draggable() 本身会让你通过单击来移动两者。
外部元素限制为水平拖动，内部元素限制为垂直拖动。当您单击内部元素时，如果外部元素位于内部元素之后，您应该能够进行水平拖动。并且内部元素的位置是相对于外部元素的，所以如果外部元素水平拖动，内部元素也会随之移动。

标签： jquery jquery-ui

【解决方案1】：

我有一个替代解决方案。它可能无法同时移动 x 和 y 轴的内部 div，但通过使用 handle 选项，您还可以在水平拖动内部 div 时移动外部 div：

<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

【讨论】：

谢谢普鲁思维。这接近我想要的。但我需要一种方法让内部“.slide”不处理水平拖动事件并将其传递给父级“.slides”，以便它可以处理它。
@rosewater 通过创建句柄，我限制了内部 div 的可拖动性，因此每当您使用内部 div 的其余部分（句柄除外）拖动时，它将被视为父 div 拖动事件。

【解决方案2】：

这是一种可能适合您的解决方案。据我了解您的目标，这将使元素保持在一起，但将它们限制在一个轴或另一个轴上。

Demo Fiddle

JS：

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

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

【讨论】：

【解决方案3】：

我使用您的答案 (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;
    }
});

【讨论】：