HTML5属性 draggable可以让元素变成可拖动
<p draggable="true">这是一个可拖动的段落。</p>
该属性有三个值可选:true | false | auto
- true:表示可拖动
- false: 表示不可拖动
- auto: 表示浏览器默认行为
拖动事件:
拖动的元素上触发:事件皆由拖动元素监听
- ondragstart: 用户开始拖拉元素的时候触发
- ondrag:元素拖动过程中触发
- ondragend: 用户完成元素拖动后触发
释放所位于的元素(容器)上触发:事件皆由容器元素监听
- ondragenter:当拖动元素进入容器中时触发
- ondragover:当拖动元素在容器中拖动过程中触发
- ondrop:在容器中,释放拖拉时触发
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#box1, #box2, #box3{
width: 200px;
height: 300px;
border-radius: 10px;
border: 1px solid #333;
float: left;
margin-left: 20px;
}
#item1,#item2,#item3,#item4 {
width: 90%;
margin: 0 auto;
border-radius: 10px;
height: 50px;
border: 1px solid #333;
margin-top: 10px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box1" ondragover="allowDropIn(event)" ondrop="drop(event)">
<div id="item1" draggable="true" ondragstart="drag(event)">item1</div>
<div id="item2" draggable="true" ondragstart="drag(event)">item2</div>
<div id="item3" draggable="true" ondragstart="drag(event)">item3</div>
</div>
<div id="box2" ondragover="allowDropIn(event)" ondrop="drop(event)">
<div id="item4" draggable="true" ondragstart="drag(event)">item4</div>
</div>
<div id="box3" ondragover="allowDropIn(event)" ondrop="drop(event)">
</div>
</body>
<script type="text/javascript">
function allowDropIn(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
let pattern1 = /^box/
var data = ev.dataTransfer.getData("Text");
if (pattern1.test(ev.target.id)) {
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
}
</script>
</html>
在vue中的使用:vuedraggable