2

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

http://imgur.com/L4trY6F

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

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

有没有办法使用可拖动来实现这一点？

PS 一些代码来取悦堆栈溢出提交系统，但图片或 JSF 显示我的意思要好得多

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

3 回答 3

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");

我做了一个小提琴来展示它的样子。

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

于 2013-03-13T11:16:17.730 回答
0

这是一个适合你的小提琴。诀窍是显示一些#content 空间，以便您可以水平拖动它。还添加了

.fredcontent{
    height:100%;
}

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

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

而不是

$( ".fredcontent" ).draggable({axis: "y" });
于 2013-02-01T07:41:40.820 回答
0

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

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

$('#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;

在这个小提琴上检查一下。 http://jsfiddle.net/Dtwigs/mRPuv/

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

于 2013-02-13T19:26:12.153 回答