Comment: It has always been what netizens want to see if they don’t use javascript to achieve drag and drop effect. Today, html5 has done a detailed introduction to you next. Friends who need to know can refer to it.
In web development, we need to use Javascript to achieve drag-and-drop effect. Today let's implement it using Html5:
Let's look at the core html code first:
<div>
<p>Drag small yellow squares into large red box</p>
</div>
<div draggable="true">
</div>
<div>
</div>
The draggable property is newly added by html5. It has three values: true, false, auto. true is dragged, false is not allowed. auto depends on whether the user's browser supports it. For more information, please refer to the official documentation.
Add a little style:
<style type="text/css">
#drop
{
width: 300px;
height: 200px;
background-color: #ff0000;
padding: 5px;
border: 2px solid #000000;
}
#item
{
width: 100px;
height: 100px;
background-color: #ffff00;
padding: 5px;
margin: 20px;
border: 1px dashed #000000;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
</style>
Then let's look at javascript:
function listenEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false);
} else if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
// cancel event
function cancelEvent (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
// cancel propagation
function cancelPropagation (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
window.onload=function() {
var target = document.getElementById("drop");
listenEvent(target,"dragenter",cancelEvent);
listenEvent(target,"dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text");
target.appendChild(document.getElementById(id));
});
var item = document.getElementById("item");
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || window.event;
evt.dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.setData("Text",item.id);
});
};
function dragOver(evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
return false;
}
From the above code, we look at drag and drop Events provided by using a set of HTML5, and look directly at the following:
dragstart
Drag event starts.
drag
During the drag operation.
dragenter
Drag is over the target; used to determine if target will accept drop.
Dragover
Drag is over target; used to determine feedback to user.
drop
Drop occurs.
dragleave
Drag leaves target.
dragend
Drag operation ends.
Define related events to implement the desired function. The above Js is not difficult to understand.
You can try it yourself. Currently, it supports the best in Opera, but the IE effect is not good.
Hope it will be helpful to your web development.