jquery-ui - jquery UI 可拖动子 div 上的 x 轴，父级上的 y 轴

Question

我在容器 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" });
});

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展示它的样子。

希望对大家有所帮助。 ^‿^