jQuery UI可拖动插件：子div在x轴上可拖动，父div在y轴上可拖动。

Question

我在一个容器div中有4个子div。我想要能够垂直拖动这四个div的内容，同时也能够水平拖动整个容器。就像下面这样...

或者在这里看到：http://jsfiddle.net/PuVCz/

问题是当你在内部点击第一个和第二个div时，你可以将它们上下拖动，当你在右侧两个空的div内部点击时，你可以将它们全部左右移动，但当你在前两个div内部点击时，你无法水平移动整个内容，因为jquery认为你想控制内容的上下移动。

有没有一种使用draggable来实现这一点的方法？

PS 请提供一些代码以符合Stack Overflow提交系统的要求，但图片或JSF更能清楚地说明我的意思

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

- xgarb

Answer 1

我曾经遇到同样的问题...

我的解决方案是进入拖动状态，确定移动方向。

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示例，展示它的外观。

希望它能有所帮助。^‿^

- Hansinger

Answer 2

这里有一个可用的fiddle。诀窍在于展示#content空间的一部分，以便您可以水平拖动它。还添加了

.fredcontent{
    height:100%;
}

以便您可以水平拖动空的div。此前它们没有100％的高度，因此左右拖动两个空div是

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

and not of

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

- Mandeep Jain

---

嗨，谢谢你的回答。今天我想得更清楚了，我觉得我想做的事情是不可能的，因为当你点击div时，jQuery会使其成为活动div而不是父div，所以你只能在垂直方向上移动它。我必须在div外部留下间隙以进行水平移动（根据您的答案），但我希望div并排放置。我将调查jquery mobile中的swipe方法。 - xgarb

当然，在一个事件上你不能有两个不同的行为。此外，当拖动开始时，你无法确定用户将要做什么，即水平还是垂直拖动。因此，你所要求的非常困难。 - Mandeep Jain

我用jQuery Mobile的滑动功能得到了这个http://jsfiddle.net/swtvq/8/。我觉得我可以在我的项目中使用这个。 - xgarb

说实话，我发现有点小问题。祝一切顺利 :) - Mandeep Jain

Answer 3

我已经创建了一种方法来实现这个。基本上，您将拖放应用于所有子元素，如果您沿X轴拖动，它将更改父元素的X坐标。在这里可以在Fiddle上查看。

只需将此添加到您的父元素即可。

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

首先，它会将.draggable()函数应用于属于#parent的每个子元素。

var children = $(this).children();

        children.draggable({..})

然后在拖动属性中，它会测试您是否将其沿着X轴或Y轴拖动。如果您沿着X轴拖动，则将父元素的“left”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;

在这个fiddle上查看。 http://jsfiddle.net/Dtwigs/mRPuv/

p.s. 这段代码受到了我在stackoverflow上找到的另一个例子的启发，但我找不到/记得那个例子是什么。基本上它允许一个对象同时在X轴或Y轴移动，但不能同时移动。

- Danwilliger