jquery - 内部 div 可垂直拖动，应允许父 div 可水平拖动

Question

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

Answer 1

我有一个替代解决方案。它可能无法同时移动内部 div x 和 y 轴，但通过使用 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