<!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>
Representaciones:
La izquierda y la derecha pueden arrastrar los cuadros blancos y el contenido entre sí, y la izquierda y la derecha también pueden ajustar el orden solo en el área azul. Cada cuadro azul corresponde a un contenido blanco, hasta que el derecho esté lleno. El lugar donde existe la caja blanca no puede recibir otras cajas blancas.