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

我有另一种解决方案。它可能无法同时移动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

Answer 2

这是一个可能适合您的解决方案。正如我理解你的目标，这将把元素保持在一起，但将它们限制在一个轴或另一个轴上。

<强> Demo Fiddle

JS：

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

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

Answer 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;
    }
});

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

3 个答案: