<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖放</title>
<style>
h2 {
font-size: 20px;
color: gray;
}
div#left,
div#right {
width: 120px;
height: 300px;
float: left;
margin: 10px 100px 10px 0px;
border: 1px solid #000;
overflow-y: auto;
}
div label {
font-size: 22px;
font-weight: bold;
width: 100%;
display: inline-block;
padding: 4px 0;
text-align: center;
margin: 0px 0 2px 0;
color: #fff;
background-color: gray;
}
</style>
</head>
<body>
<div>
<h2>H5拖放</h2>
<!-- 左边元素框 -->
<div id="left">
<label draggable="true">A</label>
<label draggable="true">B</label>
<label draggable="true">C</label>
<label draggable="true">D</label>
<label draggable="true">E</label>
</div>
<!-- 右边元素框 -->
<div id="right"></div>
</div>
<script>
const right = document.getElementById('right')
const left = document.getElementById('left')
right.ondragover=(ev)=>{
ev.preventDefault(); //阻止向上冒泡
ev.stopPropagation();
}
right.ondrop=(ev)=>{
const val = ev.dataTransfer.getData('Text');
console.log('right ondrop',val,ev.target.id)
const child = document.getElementById(val)
if(ev.target.id==='right'){
if(right.contains(child)){
console.log('是自身的子标签,末尾追加')
}else{
console.log('不是自身的子标签,末尾追加')
right.append(child)
}
}else{
console.log('位置调动',right.contains(child))
if(right.contains(child)){
console.log('是自身的子标签')
right.insertBefore(document.getElementById(ev.target.id),document.getElementById(val))
}else{
console.log('不是自身的子标签')
right.append(child)
}
}
}
left.ondragover=(ev)=>{
ev.preventDefault(); //阻止向上冒泡
ev.stopPropagation();
}
left.ondrop=(ev)=>{
const val = ev.dataTransfer.getData('Text');
console.log('left ondrop',val,ev.target.id)
const child = document.getElementById(val)
if(ev.target.id==='left'){
if(left.contains(child)){
console.log('是自身的子标签,末尾追加')
left.append(child)
}else{
console.log('不是自身的子标签,末尾追加')
left.append(child)
}
}else{
console.log('位置调动',left.contains(child))
if(left.contains(child)){
console.log('是自身的子标签')
left.insertBefore(document.getElementById(ev.target.id),document.getElementById(val))
}else{
console.log('不是自身的子标签')
left.append(child)
}
}
}
const labels = document.getElementsByTagName('label')
Array.prototype.slice.call(labels).forEach((element,i) => {
const arr = ['A','B','C','D','E']
element.id = arr[i]
element.ondragstart = (ev)=>{
console.log(arr[i])
ev.dataTransfer.setData("Text", arr[i]);
}
});
</script>
</body>
</html>
H5拖放 (简单学习demo)
最新推荐文章于 2024-10-19 16:02:10 发布