Submit your widget

jquery.top-droppable

Created 4 years ago   Views 21213   downloads 2386    Author vaceta
jquery.top-droppable
View DemoDownload
69
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.

Dependencies

In order to use jquery.top-droppable you have to include the libraries jQuery and jQuery UI.

Installation

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/jquery.top-droppable.js"></script>

Usage

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:

$(".top-droppable").topDroppable({
    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:

$(".top-droppable").topDroppable({
    drop: function (e, ui) {
     alert("dropped into " + $(this).attr('id'));
    }
}).droppable({
    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:

$.getTopElement();

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:

$.getCurrentHoveredElements();

 

Author

Matthias Klan

contact: matthias.klan@gmail.com

Licence

The MIT License (MIT)

Tag: droppable