<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#draggable {
width: 200px;
height: 30px;
text-align: center;
background: white;
}
.container {
width: 500px;
height: 600px;
background-color: aqua;
margin-left: 500px;
}
.dropzone,
.dropzone1 {
width: 200px;
height: 30px;
background: blueviolet;
margin-bottom: 15px;
/* padding: 10px; */
}
.box {
position: relative;
width: 230px;
height: 600px;
background-color: greenyellow;
top: -180px;
margin-left: 298px;
}
</style>
</head>
<body>
<div class="container">
<!-- 左侧 -->
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable1
</div>
</div>
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable2
</div>
</div>
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable3
</div>
</div>
<!-- 右侧 -->
<div class="box">
<div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
</div>
<div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
</div>
<div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
</div>
<div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
</div>
</div>
</div>
<script type="text/javascript">
var dragged;
document.addEventListener("drag", function (event) {
}, false);
document.addEventListener("dragstart", function (event) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
// event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function (event) {
// reset the transparency
// event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function (event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function (event) {
// highlight potential drop target when the draggable element enters it
// if (event.target.className == "dropzone") {
// event.target.style.background = "red";
// }
// if (event.target.className == "dropzone1") {
// event.target.style.background = "red";
// }
}, false);
document.addEventListener("dragleave", function (event) {
// reset background of potential drop target when the draggable element leaves it
//
}, false);
document.addEventListener("drop", function (event) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if (event.target.className == "dropzone1") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
}, false);
</script>
</body>
</html>Renderings:
The left and right can drag the white boxes and content to each other, and the left and right can also adjust the order in the blue area alone. Each blue box corresponds to a white content, until the right is full. The place where the white box exists cannot receive other white boxes.
