子节点上的jquery UI可拖动x轴，父节点上的y轴

Question

我在容器div中有4个div。我希望能够垂直拖动四个div的内容，但也能够水平拖动所有四个div的容器。像下面的东西..

或者如此处所见：http://jsfiddle.net/PuVCz/

问题是当你在里面点击它们时，你可以上下左右拖动前两个div，当你点击2个右空div时，你可以左右移动整个批次，但是当你点击时你不能水平移动整个批次前两个作为jquery认为你试图控制内容的上/下移动。

有没有办法使用draggable来实现这个目标？

PS一些代码来取悦Stack Overflow提交系统，但pic或JSF显示我的意思更好

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

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

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

Answer 2

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

.fredcontent{
    height:100%;
}

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

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

而不是

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

Answer 3

我创造了一种方法来做到这一点。基本上你应用拖放到所有子元素，如果你拖过X轴，它将改变父X的坐标。这是在小提琴上。

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

即可

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

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

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

        children.draggable({..})

然后在drag属性中，它会测试是否要在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;

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

P.S。这个代码很大程度上受到我在堆栈溢出时发现的另一个例子的启发，尽管我找不到/记住这个例子。基本上它允许一个物体在Y或Y上移动但不能同时移动。