jquery UI 两个可拖动对象冲突

jquery ui two draggables conflict

本文关键字：拖动 对象 冲突 两个 UI jquery      更新时间：2023-09-26

我有两个div的内在秒内。我不想执行一些 JavaScript 逻辑，并根据结果允许拖动 #c 或继续 #a 事件。怎么做？

.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，那么处理程序 #c #a 拖动，如果 drag = true，那么只有 #c 是可拖动的。

更新了 http://jsfiddle.net/52FQX/3/上的示例

不确定我是否理解您的查找内容..但是，如果您只希望容器在切换之前拖动山墙，反之亦然，那么您就走在正确的轨道上，我会使用 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/

相关文章：