JQuery Element not dropping 
<p>I have this page am working on <a href="https://schedule.nookal.com/" rel="nofollow">https://schedule.nookal.com/</a> and as you can see, the "events" are draggable and droppable on each other. I want to make something like "overlapping events" (2 events at a time). And as you can notice too, the events are resizable (you can add duration by resizing the bottom), the problem is that jQuery isn't detecting the new resized portion of the div (it's only detecting its middle) I want the elements to overlap whenever there is a collision between the two durations, not only the middle... Also, tolerance:"touch" doesn't seem to work... I'm thinking of a problem in CSS.. Please help</p>

<pre><code>$(".DivBG[data-occupied=1]").droppable({
accept: $(".DivBG[data-occupied=1]"),
hoverClass: "touch",
greedy: true,
over: function(event, ui) {
    $(ui.draggable).css("width", "125px");
    $(ui.draggable).css("margin-left", "125px");
    $(this).css("width", "125px");
},
out: function(event, ui) {
    $(ui.draggable).css("width", "250px");
    $(ui.draggable).css("margin-left", "0px");
    $(this).css("width", "250px");
    $(ui.draggable).removeClass("overlapdraggable");
} 
});
</code></pre>
