HTML5属性 draggable 实现拖拉事件

 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值