HTML5 Drag and Drop
HTML5 allows us to create drag and drop applications much more easily than we used to in HTML. Before this upgrade to HTML we had to use HTML4 with Javascript frameworks and APIs that are bulky and complexly coded in order to create drag and drop applications on a web page. You can create drag and drop applications that:
- Allow user to change the order or placement of images or page elements by dragging.
- Allow user to drag unwanted items to deletion zones by dragging them.
- Allow user to play interactive games in HTML5 that involve dragging things around.
- Use Ajax to post values and coordinates to PHP to save locations or ordering of dragged items.
Drag and Drop Events
We use drag event attributes to enable drag and drop functionality upon elements in our application. We connect these events to Javascript functions that we write to handle what takes place in our application when the events fire off.
ondragstart - when user starts dragging an object.
ondragenter - when the item being dragged is initially moved over an element.
ondragover - when the item being dragged is moved over an element.
ondragleave - when the item being dragged leaves an element.
ondrag - any time the mouse is moved while an object is being dragged.
ondrop - when the item being dragged is dropped or let go of by the user.
ondragend - when the drag operation is complete.
ondragenter - when the item being dragged is initially moved over an element.
ondragover - when the item being dragged is moved over an element.
ondragleave - when the item being dragged leaves an element.
ondrag - any time the mouse is moved while an object is being dragged.
ondrop - when the item being dragged is dropped or let go of by the user.
ondragend - when the drag operation is complete.
Drag and Drop Demo
Note: Be sure the browser you test this with supports HTML5!
HTML CODE EXAMPLE
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#paper {
background-color:#FFF3CC;
border:#DFBC6A 1px solid;
width:100px;
height:100px;
padding:8px;
font-size:18px;
text-align:center;
}
#recycle_bin {
background-color:#CCC;
width:200px;
height:200px;
padding:8px;
font-size:18px;
text-align:center;
}
</style>
<script type="text/javascript">
var isRecycled = false;
function appStatus(msg){
document.getElementById('app_status').innerHTML = msg;
}
// "e" represents the drag event in question for each drag function
function drag_start(e) {
appStatus("Dragging the "+e.target.getAttribute('id'));
e.dataTransfer.dropEffect='move';
e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
}
function drag_enter(e) {
appStatus("You are dragging over the "+e.target.getAttribute('id'));
}
function drag_leave(e) {
appStatus("You left the "+e.target.getAttribute('id'));
}
function drag_drop(e) {
var element = e.dataTransfer.getData("Text");
appStatus("Dropped "+element+" into the "+e.target.getAttribute('id'));
e.target.appendChild(document.getElementById(element));
isRecycled = true;
document.getElementById(element).removeAttribute("draggable");
}
function drag_end(e) {
var status = document.getElementById('app_status');
if(isRecycled == false){
appStatus("You let the "+e.target.getAttribute('id')+" go.");
}
}
</script>
</head>
<body>
<h2>HTML5 Drag and Drop Demo - DevelopPHP.com</h2>
<h3 id="app_status">App status area ready...</h3>
<div id="recycle_bin" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" ondragover="return false" ondragleave="drag_leave(event)" >
Recycle Bin
</div>
<hr />
<div id="paper" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)">
Paper
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#paper {
background-color:#FFF3CC;
border:#DFBC6A 1px solid;
width:100px;
height:100px;
padding:8px;
font-size:18px;
text-align:center;
}
#recycle_bin {
background-color:#CCC;
width:200px;
height:200px;
padding:8px;
font-size:18px;
text-align:center;
}
</style>
<script type="text/javascript">
var isRecycled = false;
function appStatus(msg){
document.getElementById('app_status').innerHTML = msg;
}
// "e" represents the drag event in question for each drag function
function drag_start(e) {
appStatus("Dragging the "+e.target.getAttribute('id'));
e.dataTransfer.dropEffect='move';
e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
}
function drag_enter(e) {
appStatus("You are dragging over the "+e.target.getAttribute('id'));
}
function drag_leave(e) {
appStatus("You left the "+e.target.getAttribute('id'));
}
function drag_drop(e) {
var element = e.dataTransfer.getData("Text");
appStatus("Dropped "+element+" into the "+e.target.getAttribute('id'));
e.target.appendChild(document.getElementById(element));
isRecycled = true;
document.getElementById(element).removeAttribute("draggable");
}
function drag_end(e) {
var status = document.getElementById('app_status');
if(isRecycled == false){
appStatus("You let the "+e.target.getAttribute('id')+" go.");
}
}
</script>
</head>
<body>
<h2>HTML5 Drag and Drop Demo - DevelopPHP.com</h2>
<h3 id="app_status">App status area ready...</h3>
<div id="recycle_bin" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" ondragover="return false" ondragleave="drag_leave(event)" >
Recycle Bin
</div>
<hr />
<div id="paper" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)">
Paper
</div>
</body>
</html>
DataTransfer Object
When an item is dragged the dataTranser object offers data about the item being dragged. Such as the data type and the data value. This way we can do things like(but not limited to) allow an image to be dropped into the drop zone but not allow text or html objects to be dropped there.
Properties of the DataTranser Object:
dropEffect - the effect to be used for the drop operation. Possible values for this property are:
* copy - makes a copy of the source item.
* move - moves an item to a new location.
* link - makes a link to the source at the new location.
* none - the item may not be dropped.
* copy - makes a copy of the source item.
* move - moves an item to a new location.
* link - makes a link to the source at the new location.
* none - the item may not be dropped.
effectAllowed - specify effects for the drag operation. Set effects for the source in the "ondragstart" event, and set effects for the drop target within the "dragenter" and "dragover" events. Possible values for this property are:
* copy - allow a copy of the source item to be made.
* move - allow an item to be moved.
* link - allow a link to be established.
* copyLink - allow a copy or link operation.
* copyMove - allow a move operation.
* linkMove - allow a link or move operation.
* all - allow all operations.
* none - the item may not be dropped.
* uninitialized - value for effects not set yet.
* copy - allow a copy of the source item to be made.
* move - allow an item to be moved.
* link - allow a link to be established.
* copyLink - allow a copy or link operation.
* copyMove - allow a move operation.
* linkMove - allow a link or move operation.
* all - allow all operations.
* none - the item may not be dropped.
* uninitialized - value for effects not set yet.
files - a list of all the files available on the data transfer. Only populates if files are in the drag operation.
types - a list of the data type formats stored for the first item.
Methods of the DataTranser Object:
addElement() - Set the drag source. Parameters we can access for this method are:
* element - the element to add.
* element - the element to add.
clearData() - Remove the data associated with a given type.
* type - the type of data to move.
* type - the type of data to move.
getData() - Retrieves the data for a given type. This data will only be available once a drop occurs. Parameters we can access for this method are:
* type - the type of data to retrieve.
* type - the type of data to retrieve.
setData() - Set the data for a given type. Parameters we can access for this method are:
* type - the type of data to add.
* data - the data to add.
* type - the type of data to add.
* data - the data to add.
setDragImage() - Set a custom feedback image to be used for the dragging operation. Parameters we can access for this method are:
* image - element to use as the drag feedback image.
* x - horizontal offset within the image.
* y - vertical offset within the image.
* image - element to use as the drag feedback image.
* x - horizontal offset within the image.
* y - vertical offset within the image.
0 Response to "HTML5 Drag and Drop"
Post a Comment