HTML5的拖放事件

1、给标签添加属性draggable=ture即可允许拖放，有些标签可以不加，例如img有图片、a有url，默认拥有拖放功能

 

2、事件在被拖动元素上触发

  •   ondragstart
  •   ondrag
  •   ondragend
<!DOCTYPE html>
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
       <title>
           解释在代码中，拖动事件
       </title>
       <style>
          .dragFrame{
              width:200px;
              height:200px;
              background-color:black;
          }
       </style>
    </head>
    <body>
      
      <div class="dragFrame" draggable="true"></div>
      <script>
         //ondragstart 元素被拖动，事件触发
         document.addEventListener("dragstart",function(e){
             if(e.target.className=="dragFrame"){
                 e.target.style.opacity=.4;
             }            
         });
         //ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
         document.addEventListener("drag",function(){
             console.log("音乐：要我看多少遍 你停下来就说明你放了手");
         });
         //ondragend 容易看出元素结束拖动，事件触发
         document.addEventListener("dragend",function(e){
             if(e.target.className=="dragFrame"){
                 e.target.style=1;
             }
         });
      </script>
    </body>
</html>

3、被拖动元素进入目标元素

  •  ondragenter
  •  ondragover
  •  ondragleave

      

<!DOCTYPE html>
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
       <title>
           解释在代码中，拖动事件
       </title>
       <style>
          .dragFrame{
              width:200px;
              height:200px;
              border:1px solid black;
          }
       </style>
    </head>
    <body>
      
      <div class="dragFrame"><p id="moveFrame" draggable="true">我想走了</p></div>
      <div class="dragFrame"></div>
      <script>
         //ondragstart 元素被拖动，事件触发
         document.addEventListener("dragstart",function(e){
             if(e.target.className=="dragFrame"){
                 e.target.style.opacity=.4;
             }            
         });
         //ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
         document.addEventListener("drag",function(){
             console.log("音乐：要我看多少遍 你停下来就说明你放了手");
         });
         //ondragend 容易看出元素结束拖动，事件触发
         document.addEventListener("dragend",function(e){
             if(e.target.className=="dragFrame"){
                 e.target.style=1;
             }
         });


         //ondragenter 被拖动元素一旦进入目标元素，事件触发
         document.addEventListener("dragenter",function(e){
             e.target.style.outline="3px dotted red";
         });
         //ondragover 被拖动元素在目标元素上随时拖放，事件不断触发
         document.addEventListener("dragover",function(){
             console.log("音乐：你来看我了 我疯狂的激动");
         });
         //ondragleave 被拖动元素离开了目标元素上面，事件触发
         document.addEventListener("dragleave",function(e){
             e.target.style.outline="";
         });
      </script>
    </body>
</html>

4、drop 拖动中，释放鼠标键，事件触发（注意，在ondragover事件里要添加preventDefault的方法阻止默认行为，drop事件就可以看见效果）

     没有阻止默认行为的效果是：

    

   drop就毫无反应，跟没加过的一样

   

   阻止了默认行为后

  

 drop就有了效果

 

<!DOCTYPE html>
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
       <title>
           解释在代码中，拖动事件
       </title>
       <style>
          .dragFrame{
              width:200px;
              height:200px;
              border:1px solid black;
          }
       </style>
    </head>
    <body>
      
      <div class="dragFrame"><p id="moveFrame" draggable="true">我想走了</p></div>
      <div class="dragFrame"></div>
      <script>
         //ondragstart 元素被拖动，事件触发
         document.addEventListener("dragstart",function(e){
             if(e.target.className=="dragFrame"){
                 e.target.style.opacity=.4;
             }            
         });
         //ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
         document.addEventListener("drag",function(){
             console.log("音乐：要我看多少遍 你停下来就说明你放了手");
         });
         //ondragend 容易看出元素结束拖动，事件触发
         document.addEventListener("dragend",function(e){
             if(e.target.className=="dragFrame"){
                 e.target.style=1;
             }
         });


         //ondragenter 被拖动元素一旦进入目标元素，事件触发
         document.addEventListener("dragenter",function(e){
             e.target.style.outline="3px dotted red";
         });
         //ondragover 被拖动元素在目标元素上随时拖放，事件不断触发
         document.addEventListener("dragover",function(e){
             e.preventDefault();
             console.log("音乐：你来看我了 我疯狂的激动");
         });
         //ondragleave 被拖动元素离开了目标元素上面，事件触发
         document.addEventListener("dragleave",function(e){
             e.target.style.outline="";
         });
         document.addEventListener("drop",function(e){
             e.preventDefault();
             alert("drop有效果了");
         })
      </script>
    </body>
</html>

 

5、兼容性

 

posted @ 2018-06-07 02:37  木人子韦一日尘  阅读(465)  评论(0)  编辑  收藏  举报