- Created on Monday, 11 April 2011 08:22
- Last Updated on Saturday, 14 December 2013 11:22
- Written by Terrence
- Hits: 4743
The implementation at first appears to be straightforward; we designate an element as 'draggable,' we then designate an element that watches for a dropped object, and we execute some code when that happens.
To do that, let's create a simple drag-and-drop interface that lets us drag small images into a drop area that will load the larger version.
Weâ€™ r e using custom data attributes here to hold the source of the larger version of our photos.
Styling with CSS
I have created the â€œstyle.cssâ€ file into â€œcssâ€ folder. All our css styles will be here.
Weâ€™ll need to work with several events related to dragging and dropping elements.
ondragstart:Â Fires when the user starts dragging the object
ondragend:Â Fires when the user stops dragging the object for any reason
ondragenter:Â Fires when a draggable element is moved into a drop listener
ondragover:Â Fires when the user drags an element over a drop listener
ondreagleave:Â Fires when the user drags an element out of drop listener
ondrop:Â Fires when the user drops an element into a drop listener successfully
ondrag:Fires when the user drags an element anywhere; fires constantly but can give XÂ and Y coordinates of the mouse cursor
Thatâ€™s a total of seven events just to handle dragging and dropping elements, and some of the events have default behaviors. If we donâ€™t override them, the whole thing fails.
I have include jQuery from Googleâ€™s CDN.
First, we need to define all of our list items as draggable.
Weâ€™ re adding the draggable HTML5 attribute.
When we drag the image, we want to grab the address of the large image and store it. We'll bind to the ondragstart event, and to keep it simple and cross-platform, we'll use jQuery's bind() method
The specification provides a dataStorage mechanism that lets us specify the type of data and the data itself, which is passed along as part of the event. jQuery's bind( ) method wraps the event in its own object.
In 2nd line we use the originalevent property to access the real event.
In line 4 We store the URL to the image on the event by using the setData( ) method using Text as the data type.
Now that we can drag elements, let's see how to fire events when the user drops the elements.
We want our form field to act as our drop target, so we'll locate it and bind the drop event.
We retrieve the image address we passed with the event using the get-Data( ) method on line 5, and we then create a new image element that we push into our content region.
We need to cancel the default ondrop event so it wonâ€™t fire when our user drops the element onto the target. To do that, we need to use both preventdefault( ) and return false. Internet Explorer needs return false, andother browsers need preventDefault().
We want to let the user know they have dragged an element over a drop target, and we can do that using the ondragenter and ondragleave methods.
This applies our hover class in our style sheet, which will be applied and removed when these events fire.
Donâ€™t try dragging text onto form fields. Modern browsers already let you do this, but there's no good way to override that behavior.