js 拖拽案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
        div {
            float: left;
            width: 100px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        img {
            width: 88px;
            height: 31px;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("eleId", ev.target.id);
        }

        function drop(ev) {
            // ev.preventDefault();
            var curId = ev.dataTransfer.getData("eleId");
            ev.target.appendChild(document.getElementById(curId));
        }
    </script>
</head>

<body>

    <div ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag1">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag2">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag3">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag4">
    </div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

解析:
1.设置元素可拖放

< img draggable="true">

2.阻止元素默认事件,默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。event.preventDefault()

3.拖拽,可以传递拖拽元素的信息,这里把被拖拽的元素id传递过去,这样目标容器就可以通过id找到元素,然后appendChild进去。

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

4.放置在目标元素区内,会触发ondrop方法。
这里两个有drop方法,因为这里两个box可以来回拖动,放置在哪个box中,就触发哪个drop的方法,所以这里的ev.target就是要放置的目标box,所以直接appendchild就可以。

function drop(ev) {
     // ev.preventDefault();单写这里不行,因为这个只设置了目标盒子可拖动,而被拖走的盒子没设置,所以直接在两个盒子上设置οndragοver="allowDrop(event)"
     var data = ev.dataTransfer.getData("Text");
     ev.target.appendChild(document.getElementById(data));
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值