<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>H5 drag and drop</title>
<style type="text/css">
body{font-size:84%; }.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:Microsoft Yahei."Yahei Mono"; text-align:center; text-shadow: -1px -1px #bbb; float:left; }.dragbox{width:500px; padding-left:20px; float:left; }.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move; }.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9; }.dragremind{padding-top:2em; clear:both; }</style>
</head>
<body>
<div class="dustbin"><br />loading<br />there<br />box</div>
<div class="dragbox">
<div class="draglist" title="Drag me." draggable="true">The garbage</div>
</div>
<div class="dragremind"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
var eleDustbin = $(".dustbin") [0], eleDrags = $(".draglist") [0], eleRemind = $(".dragremind") [0], eleDrag = null;
eleDrags.onselectstart = function() {
return false;
};
eleDrags.ondragstart = function(ev) {
/* Drag starts */
// Drag effect
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0.0);
eleDrag = ev.target;
return true;
};
eleDrags.ondragend = function(ev) {
/* Drag ends */
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
eleDustbin.ondragover = function(ev) {
/* When you drag an element over the target element */
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
/* Drag the element onto the target element head */
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
/* Drag the element over the target element while releasing the mouse */
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + ' thrown in the bin';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "# 000000";
return false;
};
</script>
</body>
</html>
Copy the code\
\
Note: Welcome to join the web front-end job hunting qq group: 668352707\