514 CHAPTER 13 Drag and drop
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 roperty that gets a file list of the files being dragged.P
■■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.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.8.3.js"></script>
<script src="Scripts/CarList.js"></script>
</head>
<body>
<p>What cars do you like?</p>
<ul id="carList">
<li draggable="true" data-value="car,Chevrolet">Chevrolet</li>
<li draggable="true" data-value="car,Ford">Ford</li>
<li draggable="true" data-value="car,BMW">BMW</li>
</ul>
<p>Drop your favorite cars below:</p>
<ul id="favoriteCars" style="min-height:100px;background-color:yellow;">
</ul>
</body>
</html>There is no CSS file to make the page or the drag and drop operation look neat, but an
inline style is applied to favoriteCars so the user can see a drop area. Each of the cars is drag-
gable and uses data attributes to provide data that will be collected when the dragging starts
and then passed to the drop event. The JavaScript file is similar to the previous example,
which was used to move numbers, but this time, the data is passed to the drop event by using
the DataTransfer object as follows.
/// <reference path="jquery-1.8.3.js" />$(document).ready(function () {
jQuery.event.props.push('dataTransfer');
$('#carList').on('dragstart', dragging);
$('#favoriteCars').on('dragenter', preventDefault);
$('#favoriteCars').on('dragover', preventDefault);