jQuery UI在子div上可拖动的x轴，在父div上的y轴 [英] jquery UI draggable x-axis on child div, y-axis on parent

问题描述

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

I have 4 divs in a container div. I want to be able to drag the contents of the four divs vertically but also be able to drag the container for all four divs horizontally. Something like the following..

或如此处所示： http ：//jsfiddle.net/PuVCz/

问题是，当您单击前两个div时，可以上下拖动前两个div右击，当您在右两个空div内单击时，但是当您单击前两个时，由于jQuery认为您正在尝试控制内容的上/下移动，因此无法水平移动整个批次。

Problem is you can drag the first two divs up and down when you click inside them and the whole lot left and right when you click inside the 2 right empty divs but you can't move the whole lot horizontally when you click in the first two as jquery thinks you are trying to control the up/down movement of the contents.

是否可以使用可拖动的方式来实现此目的？

Is there a way of using draggable to achieve this?

PS某些代码可以取悦Stack Overflow提交系统，但图片或JSF显示我的意思要好得多

PS Some code to please the Stack Overflow submit system but the pic or JSF show what I mean much better

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

推荐答案

我遇到了同样的问题。.

I had the same problems..

我的解决方法是进入拖动状态，即运动方向。

my solution was to get in the drag state, the direction of movement.

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){

如果方向是垂直的，那么什么也不会引人入胜。

if the direction was vertically, then nothing fascinating happens.

但是如果脚本检测到x轴上有移动，则禁用该脚本滚动x行为并移动外部容器。

but if the script detects a movement in x axis then its disable "scroll x behaviour" and move the outer container instead.

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

我做了一个小提琴来显示它的外观。

i made a fiddle to show how it looks like.

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

I hope it helps a bit. ^‿^

这篇关于jQuery UI在子div上可拖动的x轴，在父div上的y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！