h5 要点：拖放_cch5dragbtn 禁止拖放-CSDN博客

本文链接：https://blog.csdn.net/weixin_41796631/article/details/88343450

拖放

1. 被拖放的元素： draggable 设置为 true；事件关联 οndragstart=drag(event)

2.目的地元素：事件关联οndrοp="drop(event)" ；禁止拖动时默认动作 οndragοver="allowDrop(event)"

3. 函数：

<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>

<script type="text/javascript">

//被拖放的元素设置数据传输（被拖放的元素）
function drag(ev)
{
ev.dataTransfer.setData("T",ev.target.id);
}

//禁止拖放时触发默认动作（目的地元素）
function allowDrop(ev)
{
ev.preventDefault();
}

//拖放时，接收数据（目的地元素）
//并把目标元素添加到目的地元素
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("T");
ev.target.appendChild(document.getElementById(data));
}

</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</body>
</html>

拖放前

拖放后