js玩转多个div互换
程序员文章站
2022-07-14 16:45:40
...
开胃菜
代码是这样滴
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.divClass {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div class="divClass" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true"
ondragstart="drag(event, this)">
<p>Ali</p>
</div>
<div class="divClass" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true"
ondragstart="drag(event, this)">
<p>Tencent</p>
</div>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
var srcdiv = null;
function drag(ev, divdom) {
srcdiv = divdom;
ev.dataTransfer.setData("text/html", divdom.innerHTML);
}
function drop(ev, divdom) {
ev.preventDefault();
if (srcdiv != divdom) {
srcdiv.innerHTML = divdom.innerHTML;
divdom.innerHTML = ev.dataTransfer.getData("text/html");
}
}
</script>
</body>
</html>简单解释下函数
- ondrop: 拖到目的地放下之后要做的处理，这里自定义drop(event,this)函数,互换两个的innerHTML
- ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
- draggable:允许拖动
- ondragstart:选取拖动目标要做的处理，这里保存拖动目标的innerHTML.