Submit your widget

Created 6 years ago   Views 23090   downloads 2786    Author vaceta
View DemoDownload
Share |

A small jQuery UI plugin, which allows you to drop a draggable-element only into the foremost droppable-element, if more of them are overlapping.


In order to use you have to include the libraries jQuery and jQuery UI.


Include the script after jQuery and jQuery UI:

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-ui.js"></script>
<script src="/path/to/"></script>


Prepare the top-droppable elements

Every drop element that want to use the top-droppable feature needs a specific z-index value:

<div id="1" class="top-droppable" style="z-index: 1;"></div>
<div id="2" class="top-droppable" style="z-index: 2;"></div>

topDroppable method and drop event

To use this plugin simply select your top-droppable elements, call the topDroppable method and listen to thedrop event. The drop event will trigger only once on drop and provides a reference to the foremost top-droppable element stored in this. You can still access e and ui and do stuff you would do with the native drop event of jQuery UI's droppable method:

    drop: function (e, ui) {
     alert("dropped into " + $(this).attr('id'));

use jQuery UI's droppable options and events

You can chain the draggable method to setup all the native options and events provided by jQuery UI:

    drop: function (e, ui) {
     alert("dropped into " + $(this).attr('id'));
    tolerance: "pointer"

Keep in mind not to use the native drop event.

access the foremost element while dragging

You can access the currently foremost element while still dragging over the top-droppable elements with the following method:


access the currently hovering over top-droppable elements while dragging

You can access the top-droppable elements that you are currently hovering over with the following method:




Matthias Klan



The MIT License (MIT)

Tag: droppable