jquery ui两个draggables冲突

时间:2013-11-11 15:04:05

标签: javascript jquery jquery-ui

我在第二个内部有两个div。 我不想执行一些JavaScript逻辑,并根据结果允许在#a上拖动#c或继续事件。怎么做?

HTML:

<div id='a'>
    <div id='b'>content</div>
    <div id='c'>#a must drag</div>
</div>

JS:

var drag = false;
setInterval(function(){
    if(drag){
        drag = false;
        $('#c').text('#a must drag');
    }else{
        drag = true;
        $('#c').text('#c must drag');
    }
},2000);
$(function(){
    $('#a').draggable({
        handler:'#c'
    });
    $('#c').draggable({
        start:function(event,ui){
            if(drag == false){
                //proxy event to #a or simply allow dragging of #a
            }
        }
    });
});

更新

我需要:如果drag = false然后#a拖动处理程序#c,如果drag = true,则只有#c可拖动。

已更新 http://jsfiddle.net/52FQX/3/

上的示例

1 个答案:

答案 0 :(得分:1)

不确定我是否理解你要找的东西..但是如果你只想让容器拖动山墙直到它切换,反之亦然那么你在正确的轨道上我将使用drag事件代替start因为拖动会触发整个时间。

$('#a').draggable({
    drag:function(event,ui){
        if(drag){
            //proxyfi event to #a or simply allow dragging of #a
            return false;
        }
    }
});
$('#c').draggable({
    drag:function(event,ui){
        if(drag ==false){
            //proxyfi event to #a or simply allow dragging of #a
            return false;
        }
    }
});

实施例

http://jsfiddle.net/52FQX/1/

<强>更新

$('#a').draggable({
    drag:function(event,ui){
        if(drag){
            return false;
        }
    },
    handle: "#c"
});
$('#c').draggable({
    drag:function(event,ui){
        if(drag ==false){
            return false;
        }
    },
    disabled: true
});

CSS

.ui-state-disabled {
    opacity:1;   
}

http://jsfiddle.net/52FQX/4/