This article is reproduced from http://www.html5website.com/html5-drag-and-drop-functionality-to-achieve-the-code/
http://www.html5website.com/html5-drag-and-drop-functionality-to-achieve-the-code
http://www.html5website.com/html5-drag-and-drop-functionality-to-achieve-the-code
In HTML5, drag and drop is part of the standard,any element can be draggable,details are asfollows:
1.Drag and drop
XML/HTML Code
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>drag and drop W3CSchool.cc pictures to the rectangular box :</p>
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br>
<img id=”drag1″ src=”/images/logo.png” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>
2.Set elements can be draggable
First of all, in order to make the elements can be dragged,set the draggable property to true:<img draggable=”true”>
3.Drag what – ondragstart and setData ()
Then, when the element being dragged, what will happen. In the above example,the ondragstart property calls a function, drag (event),it specifies the data to be dragged.DataTransfer.setData () method sets the data type and value of the drag data:
JavaScript Code
function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
In this case, the data type is the “Text”, the value is draggable element id (“drag1”).
4.Where to put – ondragover
Ondragover event specified where to place the data being dragged.By default, data / elements cannot be placed into other elements.If you need to set up to allow placement,we must prevent the default processing of elements.This is by calling the ondragover event’s event.preventDefault () method:event.preventDefault()
5.To place – ondrop
When the drag data is placed,the drop event will happen.In the above example,ondrop attribute calls a function, drop (event):drop(event)：
JavaScript Code
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
Code explanation:
Call preventDefault () to avoid the default browser for data processing (The default behavior of the drop event is open in the form of links).Get dragged data through the dataTransfer.getData ( “Text”) method.This method is returns the setData () method is set to the same type of any data. Drag data is the id (“drag1”) of the drag element.The dragged element added to the placement element (target element).
This article is reproduced from http://www.html5website.com/html5-drag-and-drop-functionality-to-achieve-the-code/
http://www.html5website.com/html5-drag-and-drop-functionality-to-achieve-the-code
1.Drag and drop
XML/HTML Code
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>drag and drop W3CSchool.cc pictures to the rectangular box :</p>
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br>
<img id=”drag1″ src=”/images/logo.png” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>
2.Set elements can be draggable
First of all, in order to make the elements can be dragged,set the draggable property to true:<img draggable=”true”>
3.Drag what – ondragstart and setData ()
Then, when the element being dragged, what will happen. In the above example,the ondragstart property calls a function, drag (event),it specifies the data to be dragged.DataTransfer.setData () method sets the data type and value of the drag data:
JavaScript Code
function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}
In this case, the data type is the “Text”, the value is draggable element id (“drag1”).
4.Where to put – ondragover
Ondragover event specified where to place the data being dragged.By default, data / elements cannot be placed into other elements.If you need to set up to allow placement,we must prevent the default processing of elements.This is by calling the ondragover event’s event.preventDefault () method:event.preventDefault()
5.To place – ondrop
When the drag data is placed,the drop event will happen.In the above example,ondrop attribute calls a function, drop (event):drop(event)：
JavaScript Code
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
Code explanation:
Call preventDefault () to avoid the default browser for data processing (The default behavior of the drop event is open in the form of links).Get dragged data through the dataTransfer.getData ( “Text”) method.This method is returns the setData () method is set to the same type of any data. Drag data is the id (“drag1”) of the drag element.The dragged element added to the placement element (target element).
This article is reproduced from http://www.html5website.com/html5-drag-and-drop-functionality-to-achieve-the-code/
http://www.html5website.com/html5-drag-and-drop-functionality-to-achieve-the-code
No comments:
Post a Comment