DRAG & DROP

1. DRAG & DROP HTML5, Jquery, AND JAVASCRIPT

2. Topics • What is Drag and Drop? • Benefits • Negatives • Origin/Examples • HTML5 • JQuery • Javascript • ANY QUESTIONS?!

3. What is drag & Drop • A pointing device gesture in a GUI in which a user can select an object and drag it to a different location or onto another virtual object. • Drag and drop can invoke many kinds of actions • Deletion • Reorganization • Selection • Can make various types of associations between to abstract objects

4. Benefits • Easy to learn and understand • Can extend to unfamiliar situations (Somewhat intuitive) • Can map physical metaphors to digital processes • Gives user a sense of control • Positive user experience • Great for touch screens

5. Negatives • Not always clear an item can be dragged and dropped, decreasing usability • Fitts’ Law/Imprecise - Dragging requires more physical effort than moving the same pointing device without holding down any buttons, because of this, a user cannot move as quickly and precisely while dragging. Most skilled digital editors will use the keyboard to shift objects by pixels instead of the mouse. • Inefficient – takes time and focus to pick up an object and put it down somewhere else • Can be physically awkward – When you run out of room or accidentally lift the mouse or a finger. Finger or mouse can obscure the actual object being moved. • Reordering items over long lists can be frustrating.

6. Origin • Originally developed in operating systems when GUI’s became part of the desktop experience. • Called “Click and Drag” at the time, drag and drop was used in the original Macintosh to manipulate files. • Eventually drag and drop was extended to include clipboard operations like moving text content within a document. • Workplace Shell of OS/2 used drag and drop extensively. Initial release in 1987 with the most major version released in 1996.

7. Examples • Dragging an icon on a virtual desktop to a special trashcan icon to delete a file. • Dragging a file onto a program icon for viewing or processing (Dragging a file onto an internet desktop icon to open in a browser) • Moving or copying files to different directories • Rearranging widgets or icons around a GUI • Creating hyperlinks from one location or word to another location or document • Dragging an attribute onto an object to which the command is to be applied(dragging a color onto a graphical object to change its color)

8. HTMl5 • Standard with html 5 • Make an element draggable with the draggable attribute • Specify what should happen when the element is dragged – ondragstart attribute and drag function - dataTransfer.setData() method sets the data type and the value of the dragged data • Ondragover event specifies where the data can be dropped • By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover. • When the dragged data is dropped, a drop event occurs. • EXAMPLE

9. Jquery • jqueryui.com

10. javascript • EXAMPLE

11. Sources • http://www.cise.ufl.edu/research/lok/teaching/hci-s10/papers/inkpen.pdf • http://www.disambiguity.com/when-to-use-drag-drop-some-informal-research-results/ • http://en.wikipedia.org/wiki/Drag_and_drop • http://www.w3schools.com/html/html5_draganddrop.asp • http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx