HTML5属性 draggable 实现拖拉事件

最新推荐文章于 2024-01-16 21:39:28 发布

Dilomen

最新推荐文章于 2024-01-16 21:39:28 发布

阅读量5.4k

点赞数

分类专栏：练习文章标签： H5

本文链接：https://blog.csdn.net/Dilomen/article/details/86532525

版权

练习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>