CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggablejquery-ui-droppable
A. Wheatman
A. Wheatman

Reputation: 6396

One droppable area inside another

I have two droppable areas and one of them is inside another. I want to be possible to catch drop event only for the the internal area and prevent the propagation so the external wouldn't get it at all. Is it possible to do? 

<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
    $('#draggable').draggable();
    $('#droppable1').droppable({
        drop: function() {
            console.log('droppable 1')
        }
    });
    $('#droppable2').droppable({
        drop: function() {
            console.log('droppable 2')
        }
    });
});
</SCRIPT>
<style>
#droppable1 {
    border: 1px solid black;
    position: absolute;
    height: 200px;
    top: 0px;
    width: 500px;
    background: blue;
}
#droppable2 {
    border: 1px solid black;
    position: absolute;
    height: 100px;
    top: 50px;
    width: 400px;
    left: 50px;
    z-index: 100;
    background: red;
}
#draggable {
    border: 1px solid black;
    position: absolute;
    height: 50px;
    top: 300px;
    width: 100px;
    left: 300px;
    z-index: 200;
}
</style>
</HEAD>
<BODY>
<div id="droppable1">Droppable 1</div>

<div id="droppable2">Droppable 2</div>

<div id="draggable">Draggable</div>
</BODY>
</HTML>

Here is jsFiddle example.

Try to drag the 'Draggable' box into 'Droppable 2' area. With this implementation 'Droppable 1' area will get the Drop event first and after that it will only go to 'Droppable 2'. What I want is just the 'Droppable 2' get the event.

Upvotes: 0

Views: 472

Answers (1)

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

I don't know why the events are triggering in this order but here is a workaround if it helps. Just setting a timeout before triggering your event will allow you to check if the event bubbling is complete:

http://jsfiddle.net/BS3g9/3/

$(document).ready(function () {
    $('#draggable').draggable();
    $('#droppable1').droppable({
        drop: function() {
            brain.registerDrop(function() {
               console.log("DROPPED 1!");
            });
        }
    });
    $('#droppable2').droppable({
        drop: function() {
            brain.registerDrop(function() {
               console.log("DROPPED 2!");
            });
        }
    });
});

var brain = {
    state : {
        dropAction : function() {},
        dropTimer : null
    },
    registerDrop  : function(cb) {
        brain.state.dropAction = cb;
        if (brain.state.dropTimer) {
            clearTimeout(brain.state.dropTimer);
        }
        brain.state.dropTimer = setTimeout(function() {
            brain.state.dropAction();
        }, 10);
    }
}

Upvotes: 1

Related Questions