<div class="box" draggable="true">1</div>
<div class="box box1" draggable="true">2</div>
<div class="box box2" draggable="true">3</div>
<div class="box box3" draggable="true">4</div>
.box {
float: left;
width: 200px;
height: 200px;
margin: 20px 40px!important;
border: 10px solid #ccc;
border-image: linear-gradient(red,yellow) 20 10;
}
.box1 {
width: 200px;
height: 200px;
margin: 20px auto;
border: 10px solid #ccc;
border-image: linear-gradient(to top left,red,rgba(0,0,0,0)) 20 10;
}
.box2 {
width: 200px;
height: 200px;
margin: 20px auto;
border: 10px solid #ccc;
border-image: linear-gradient(90deg,red,yellow) 20 10;
}
.box3{
width: 200px;
height: 200px;
margin: 20px auto;
border: 10px solid #ccc;
border-image: linear-gradient(135deg,red,yellow) 20 10;
}
let currEl = null
document.addEventListener('dragstart',function() {
console.log("目标开始拖动");
currEl = event.target
event.target.style.opacity = 0.2
})
document.addEventListener('dragend',function(event) {
console.log("拖动结束");
console.log(event.target);
event.target.style.opacity = ''
})
document.addEventListener("dragover",function(e) {
e.preventDefault()
console.log("拖动元素经过目标元素");
console.log(e.target);
})
document.addEventListener('dragenter',function(event) {
console.log('拖动元素进入目标元素')
console.log(event.target);
})
document.addEventListener('drop',function(event) {
console.log("拖动元素放到目标元素");
turn(currEl,event.target)
})
document.addEventListener('dragleave',function(event) {
console.log("拖动元素离开");
console.log(event.target);
})
function turn(el1,el2) {
let parentNode = el1.parentNode
sibling1 = el1.nextElementSibling
sibling2 = el2.nextElementSibling
if(sibling1 == el2) {
parentNode.insertBefore(el2,el1)
}else if(sibling2 == el1) {
parentNode.insertBefore(el1,el2)
}else {
parentNode.insertBefore(el1,sibling2)
parentNode.insertBefore(el2,sibling1)
}
}