510 CHAPTER 13 Drag and drop

The following code is placed in the MicrScrambled.js file and shows the use of the drag-start and dragend events to change the style of the item being dragged until the dragging ends.

/// var $draggedItem;

$(document).ready(function () { $('.item').on('dragstart', dragging); $('.item').on('dragend', draggingEnded);

});

function dragging(e) { $(e.target).addClass('dragging'); $draggedItem = $(e.target);

}

function draggingEnded(e) { $(e.target).removeClass('dragging'); }

This example uses the document ready function in jQuery to subscribe to the dragstart and dragend events on all elements that have the CSS class item assigned. The dragging function adds the dragging CSS class when the dragging starts and then sets the $draggedItem with the value of the item being dragged. The draggingEnded function removes the dragging CSS class.

Ini the MicroScramble.css file, the dragging CSS rule is defined as follows.

.dragging { background-color: yellow; }

In this example, the background of the dragged item changes to yellow until the dragging stops.

Dropping

After dragging, the drop must be made operational. The following events are based on the drop target.

dragenter Triggers when the drag enters a drop zone dragover Triggers continuously as the element is dragged over the drop zone dragleave Triggers when the dragged item leaves a drop zone drop Triggers when the dragged item is dropped The dragenter and dragover events default to rejecting dragged items, which is why you cant currently drop an item. You can enable dropping by cancelling the default action on these events.

Lesson 1: Dragging and dropping CHAPTER 13 511

The drop event removes the dropped item from the document object model (DOM) and then adds it back to the DOM at the drop zone location. The following code subscribes to the dragenter, dragover, and drop events.

///

var $draggedItem;

$(document).ready(function () { $('.item').on('dragstart', dragging); $('.item').on('dragend', draggingEnded);

$('.hole').on('dragenter', preventDefault); $('.hole').on('dragover', preventDefault); $('.hole').on('drop', dropItem);

});

function dragging(e) { $(e.target).addClass('dragging'); $draggedItem = $(e.target);

}

function draggingEnded(e) { $(e.target).removeClass('dragging'); }

function preventDefault(e) { e.preventDefault(); }

function dropItem(e) { var hole = $(e.target); if (hole.hasClass('hole') && hole.children().length == 0) {

$draggedItem.detach(); $draggedItem.appendTo($(e.target)); } }

In this example, the document ready function has added statements to subscribe to drag- enter, dragover, and drop. Notice that dragenter and dragover call the same preventDefault function, which prevents the rejection of the dragged items.

The drop event calls the dropItem function. In dropItem, a jQuery object is created from e.target, which is the drop target, and is assigned to a hole variable. The if statement checks whether the drop target has the hole CSS class. This is necessary because you might drop something on top of an item instead of on a hole. When the item is in a hole, the drop event bubbles up and executes the drop event on the hole. If the drop target is a hole, the code checks whether there are children; if there is a child, this hole already has an item, and you shouldnt be able to drop. If the drop target is a hole with no children, jQuery detaches the dragged item from the DOM and then appends draggedItem to the drop target. Figure 13-3 shows the item when it is being dragged and when it is dropped.

512 CHAPTER 13 Drag and drop

NOTENOTE

Quick check Which two events default operations must be prevented to allow the drop event to operate? Quick check answer The dragenter and dragover events FIGURE 13-3 The item being dragged and the item after being dropped

Using the DataTransfer object

The previous example demonstrates a complete drag and drop operation, but you can also use the DataTransfer object to pass data from the dragstart event to the drop event. By using the DataTransfer object, you dont need to create a global variable to reference the item being dragged. Using the DataTransfer object also empowers you to pass any data to the drop event as long as it can be represented as a string or URL. The DragStart object is referenced as a dataTransfer property on the dragstart event.

USING THE DATATRANSFER OBJECT WITH JQUERY

If youre using jQuery to bind events, the dataTransfer property will be missing, but it can be added by adding the following statement to the document ready function.

jQuery.event.props.push('dataTransfer');

jQuery creates a wrapper object that resembles the original event and copies only the data from the original object that jQuery needs. This statement tells jQuery to look for the data-Transfer property on the original object and, if it exists, to copy it to the jQuery wrapper. You can pass data to the drop event by using the dataTransfer property. The DataTransfer object has the following members.

-- Lesson 1: Dragging and dropping CHAPTER 13 513

You can pass data to the drop event by using the dataTransfer property. The DataTransfer object has the following members.

clearData() Method that clears the data in the DataTransfer object. dropeffect Property that gets or sets the type of drag and drop operation and the cursor type. It can be set to copy, link, move, or none. effectAllowed Property that gets or sets the allowed operations on the source element. files Property that gets a file list of the files being dragged getData() Method that gets the data in the DataTransfer object. setData() Method that sets the data in the DataTransfer object. types Property that gets a string list of types being sent. In the following example, the HTML document has an unordered list of cars, from which you can drag and drop any of the cars to a different unordered list of favorite cars as follows.

What cars do you like?

• Chevrolet
• Ford
• BMW

Drop your favorite cars below: