CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Roman B.
Roman B.

Reputation: 75

jquery ui two draggables conflict

I have two div's one inside second. I wan't to exec some JavaScript logic and depending on result allow to drag #c or continue event on #a. How to do this?

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

Update:

I need: if drag = false then #a draggable by handler #c, if drag = true, then only #c is draggable.

Updated Example on http://jsfiddle.net/52FQX/3/

Upvotes: 1

Views: 194

Answers (1)

Trevor
Trevor

Reputation: 16116

Not sure if I understand what your looking for.. But if you only want the container to be drag gable until it switches and vice versa then your are on the right track I would use the drag event instead of the start because the drag triggers the whole time.

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

Example

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

Update

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

Upvotes: 1

Related Questions