jquery UI 在子 div 上可拖动 x 轴，在父 div 上拖动 y 轴答案

【问题标题】：jquery UI draggable x-axis on child div, y-axis on parentjquery UI 在子 div 上可拖动 x 轴，在父 div 上拖动 y 轴
【发布时间】：2013-01-31 22:07:17
【问题描述】：

我在一个容器 div 中有 4 个 div。我希望能够垂直拖动四个 div 的内容，但也能够水平拖动所有四个 div 的容器。类似于以下内容..

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

问题是，当您在其中单击前两个 div 时，您可以上下拖动它们，当您在右边的 2 个空 div 中单击时，您可以左右拖动整个区域，但是当您单击时，您不能水平移动整个区域前两个 jquery 认为您正在尝试控制内容的上/下移动。

有没有办法使用 draggable 来实现这一点？

PS 一些代码可以取悦 Stack Overflow 提交系统，但图片或 JSF 更能说明我的意思

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

【问题讨论】：

标签： jquery-ui draggable

【解决方案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 来展示它的样子。

我希望它会有所帮助。 ^‿^

【讨论】：

【解决方案2】：

Here 是你的工作小提琴。诀窍是显示一些#content 空间，以便您可以水平拖动它。还加了

.fredcontent{
    height:100%;
}

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

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

而不是

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

【讨论】：

您好，感谢您的回答。今天想得更清楚了，我认为不可能做我想做的事，因为当您单击 div 时，jquery 会使活动 div 不是父级，因此您只能垂直移动它。我必须在 div 之外有间隙才能单击以进行水平移动（根据您的回答），但我希望 div 并排。我将研究 jquery mobile 中的 swipe 方法。
当然你不能在一个事件上有两个单独的行为。此外，当拖动开始时，您无法知道用户将要做什么，即水平或垂直拖动。因此，您的要求非常困难。
我通过 jquery mobile 的滑动得到了这个jsfiddle.net/swtvq/8。我想我可以将它用于我的项目。
说实话，我发现这有点儿马车。一切顺利:)

【解决方案3】：

我创造了一种方法来做到这一点。基本上，您将拖放应用到所有子元素，如果您在 X 轴上拖动，它将更改父元素的 X 坐标。它在 Fiddle 上。

只需将其添加到您的父元素中

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

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

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

        children.draggable({..})

然后在拖动属性中，它会测试您是在 X 轴还是 Y 轴上拖动它。如果您在 X 轴上拖动，请将父级“左”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;

看看这个小提琴。 http://jsfiddle.net/Dtwigs/mRPuv/

附言这段代码很大程度上受到了我在堆栈溢出中发现的另一个示例的启发，尽管我无法找到/记住该示例。基本上，它允许一个对象在 Y 或 Y 上移动，但不能同时在两者上移动。

【讨论】：