JS拖拽放置

最新推荐文章于 2024-04-03 14:20:47 发布

一只金牛座的崽

最新推荐文章于 2024-04-03 14:20:47 发布

阅读量139

点赞数

分类专栏： Js 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_43456275/article/details/120279136

版权

Js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1,#div2,#div3 {width:350px;height:30px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<ul>
    <li id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></li>
    <li id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></li>
    <li id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></li>
</ul>
<br>


<div class="drag1">
    <div id="drag1" class="drag" draggable="true" ondragstart="drag(event)">A选项哎aaaaAAAAAAAAAA</div>
</div>
<div class="drag2">
    <div id="drag2" class="drag" draggable="true" ondragstart="drag(event)">B选项哎aaaaAAAAAAAAAA</div>
</div>
<div class="drag3">
    <div id="drag3" class="drag" draggable="true" ondragstart="drag(event)">C选项哎aaaaAAAAAAAAAA</div>
</div>
<div class="drag4">
    <div id="drag4" class="drag" draggable="true" ondragstart="drag(event)">D选项哎aaaaAAAAAAAAAA</div>
</div>
<script>
function allowDrop(ev){
    ev.preventDefault();
}

function drag(ev){
    console.log('drag',ev)
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
    if (ev.target.innerHTML) {
        return false
    }
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

// var allClick = document.getElementById("drag1");
var draglist = document.querySelectorAll('.drag')
for(let i=0;i<draglist.length;i++){
    // JS监听
    draglist[i].addEventListener('click',function(){
    const copy = draglist[i].getAttribute('id')
    console.log(document.getElementsByClassName(copy))
    document.getElementsByClassName(String(copy))[0].appendChild(draglist[i])
})
}
</script>
</body>
</html>```

一只金牛座的崽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS拖拽放置

<!DOCTYPE html><html><head><title>HTML5拖拽</title><meta charset="utf-8"><style>#div1,#div2,#div3 {width:350px;height:30px;padding:10px;border:1px solid #aaaaaa;}</style></head><body><u
复制链接

扫一扫