HTML5新增属性-draggable

最新推荐文章于 2023-10-14 12:41:19 发布

小可同学啊

最新推荐文章于 2023-10-14 12:41:19 发布

阅读量300

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_55041880/article/details/118102607

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

4HTML5新增属性 draggable:是否允许用户拖动元素(true可拖拽) 拖拽效果要配合js一起设置

ondragstart: 拖拽前触发(事件对象为被拖拽元素)
ondrag 拖拽前和拖拽结束之间连续触发 (事件对象为被拖拽元素)
ondragend 拖拽结束触发(事件对象为被拖拽元素)
-> ondragenter 进入目标元素触发相当于onmouseover(事件对象为目标元素)
-> ondragover 进入目标(鼠标位置进入) 离开目标之前连续触发(事件对象为目标元素)
ondragleave 离开目标元素触发(鼠标位置离开) 相当于onmouseout(事件对象为目标元素)
ondrop 在目标元素上释放鼠标必须在dragover上阻止默认事件—ev.preventDefault
(事件对象为目标元素)

dataTRansvfer对象 (属于event) ：
ev.dataTRansvfer.setData(两个参数);(例如ev.dataTransfer.setData(“index”,index++);)设置数据方法=>ondragstart事件
ev.dataTRansvfer.getDate();获取数据方法=>ondrop事件 - effectAllowed:设置光标
- ev.dataTransfer.setDragImage(Oimg,Oimg.offsetWidth/2,Oimg.offsetHeight/2); 设置拖放效果为一张图片

事件顺序

drop不触发：dragstart>drag>dragover>dragleave>dragend
drop触发：dragstart>drag>dragover>drop>dragend

练习：要求 box移入第一个框会在第一个框加入box 移入第二个框会被删除并且添加时会显示时第几个添加进去的

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
         width: 150px;
         height: 150px;
         background-color: brown;
     }
     .add,.remove{
         width: 300px;
         height: 300px;
         background-color: burlywood;
         margin-top: 20px;
     }
    </style>
</head>
<body>
    <!-- 要求 box移入第一个框会在第一个框加入box 移入第二个框会被删除 -->
   <div class="box" draggable="true"></div>
   <div class="add">
       <span>添加</span>
   </div>
   <div class="remove">
       <span>移除</span>
   </div>
   <script>
       var oDiv1 = document.getElementsByTagName("div")[0];
       var oDiv2 = document.getElementsByTagName("div")[1];
       var oDiv3 = document.getElementsByTagName("div")[2];
       var index = 0;
       oDiv1.ondragstart = function (ev){
           ev.dataTransfer.setData("index",index++);
       }
       oDiv2.ondragenter = function (ev){
           var ch = oDiv1.cloneNode();
           oDiv2.appendChild(ch);
           ch.innerHTML = ev.dataTransfer.getData("index");
       }
       oDiv3.ondragover = function (ev){
        ev.preventDefault();
       }
       oDiv3.ondrop = function (){
           oDiv1.remove();
       }
   </script>
</body>
</html>

小可同学啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增属性-draggable

4HTML5新增属性 draggable:是否允许用户拖动元素(true可拖拽) 拖拽效果要配合js一起设置ondragstart: 拖拽前触发(事件对象为被拖拽元素)ondrag 拖拽前和拖拽结束之间连续触发 (事件对象为被拖拽元素)ondragend 拖拽结束触发(事件对象为被拖拽元素)-> ondragenter 进入目标元素触发相当于onmouseover(事件对象为目标元素)-> ondragover 进入目标(鼠标位置进入) 离开目标之前连续触发(事件对象为目标元.
复制链接

扫一扫