幸 运 飞 菲 艇 公 式 计 划 规 律 走 势 必 中 技 巧

画布、拖放事件、音视频

 1600174884

一、拖放事件

1.1 设置拖拽

给标签设置一个draggable设置为true, 标签就可以拖拽了

1.2 拖拽事件

1.2.1拖拽元素事件 (事件对象为被拖拽元素)

• ondragstart 拖拽前触发
• ondragend 拖拽结束触发
• ondrag 拖拽前、拖拽结束之间，连续触发

看实例：

<div draggable="true"><img src="images/225.jpg" alt="" style="width:100px;height: 100px;" ></div>
   <script>
       var  box = document.querySelector("div");
       box.ondragstart = function(){
           console.log("我被拖拽了！");
       }
       box.ondrag = function(){
           console.log("我在被拖拽的过程中");
       }
       box.ondragend = function(){
           console.log("拖拽结束了！");
       }
   </script>

1.2.2 目标元素事件 (俗解：意思就是拖拽的元素放在哪里)

• ondragenter 进入目标元素触发，相当于mouserover
• ondragover 进入目标，离开目标之间，连续触发
• ondragleave 离开目标元素触发，相当于mouseout
• ondrop 在目标元素上释放鼠标触发(要想触发drop事件，就必须在ondragover的时间中阻止默认事件)

1.2.3 even下的 dataTransfer 对象

• setData() : 设置数据 key 和 value (必须是字符串)
• getData() : 获取数据，根据 key 值，获取对应的value
• effectAllowed : 拖住到相应区域时显示的光标样式(none、copy、copyLink、copyMove、link、linkMove、move、all、和uninitialized)
• setDragImage() (当这个传递的节点隐藏的时候只支持Firefox)

他是拖住时显示的图形和样式 ， 有三个参数：指定的元素(指点的阴影样式)，坐标X 坐标Y(x、y是拖拽时鼠标的位置)

小案例：

     #box{margin-left:150px;}
    #box1 img{display: block;width:100px;height:100px;float:left;margin-left:20px;}

      <div id="box"><img src="images/回收站.png" alt=""></div>
    <div id="box1">
    <img src="images/唯美1.jpg">
    <img src="images/唯美2.jpg">
    <img src="images/唯美3.jpg">
    <img src="images/唯美4.jpg">
    </div>
<script type="text/javascript">
    //获取 垃圾箱对象
    var box = document.querySelector("#box");
    //获取图片列表对象
    var imgList = document.querySelectorAll("img");
    //获取图片列表的父元素
    var box1 = document.querySelector("#box1");
    //遍历图片，并且增加拖拽开始事件
    imgList.forEach(function(item,index){
        item.ondragstart = function(event){
            event.dataTransfer.setData("name",index);
        }
    });
    //阻止冒泡
    box.ondragover = function(event){
        event.preventDefault();
    };
    box.ondrop = function(event){
        // 获取拖拽元素的编号
        var index = event.dataTransfer.getData("name");
        box1.removeChild(imgList[index]);
    };
</script>