html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟）

1.拖拽和释放定义：

　　拖拽：Drag;

　　释放：Drop;

2.源对象和目标对象：

3.相关API:

　　ondragstart:源对象开始被拖动

　　ondrag:源对象被拖动的过程中

　　ondragend:源对象被拖动结束

　　ondragenter:目标对象被源对象拖动进入

　　ondragover:目标对象被源对象悬浮在上面

　　ondragleave:源对象拖动着离开了目标对象

　　ondrop:源对象拖动着在目标对象上方松手

4.拖动的源对象和目标对象之间的数据传递：

　　源对象数据保存：e.data.Transfer.setData(k,v)//k-v必须都是string类型

　　目标对象获取数据：e.data.Transfer.getData(k,v)

案例一：小猫咪随着鼠标移动

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>拖动小熊</title>

     <style>

         body{

             margin:0;

             position: relative;

         }

         img{

             position:absolute;

             width: 150px;

             height: 150px;

         }

     </style>

 </head>

 <body>

 <h3>随着鼠标拖动而移动的小猫咪</h3>

 <img id="cat" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438350926&di=d40ad5be9fac73fbcebfcbec85a88739&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D88c8f471f9039245a1e0e90bb2a488f4%2F9a504fc2d5628535aedbd09d95ef76c6a7ef6356.jpg" alt=""/>

 <script>

     var cat = document.getElementById('cat');

     cat.ondragstart = function(e){

         console.log('cat开始移动');

         offsetX = e.offsetX;

         offsetY = e.offsetY;

     };

     cat.ondrag = function(e){

         // console.log('事件源cat正在拖动中');

         var x = e.pageX;

         var y = e.pageY;

         console.log(x + '-' +y);

         if(x === 0 && y === 0){//不处理最后一刻x,y都为0 的情景

             return

         };

         x -= offsetX;

         y -= offsetY;

         cat.style.left = x+ 'px';

         cat.style.top = y + 'px';

     }

     cat.ondragend = function (e) {

         console.jlog('cat源对象拖动结束')

     }

 </script>

 </body>

 </html>

案例二：淘宝购物车删除商品效果：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>小喵咪喂给大黄鱼</title>

     <style>

         body{

             text-align: center;

         }

         img{

             width: 80px;

             height: 80px;

             border-radius:100%;

         }

         #fish{

             margin-top: 200px;

             opacity: .2;

         }

     </style>

 </head>

 <body>

  <h3>小喵咪拖到大黄鱼上面的时候消失（删除小喵咪）</h3>

  <img   class="cat"   id="cat1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537439299088&di=4abcae9fe10a919fd23695be63506d91&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c2e05777054e0000012e7eceda20.jpg%401280w_1l_2o_100sh.jpg" alt="">

  <img   class="cat"   id="cat2" src="http://img4.imgtn.bdimg.com/it/u=2404190189,262583459&fm=26&gp=0.jpg" alt="">

  <img   class="cat"   id="cat3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537439359473&di=94af89f7165210577af8d9682ca7b90b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F031763d577b43b30000018c1bcaaa23.jpg" alt="">

  <br>

  <img   id="fish"   src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2614718913,3898275106&fm=26&gp=0.jpg" alt="">

 </body>

 <script>

     //要想从数据库中删除猫咪，就需要猫咪的图片地址是后台传值过来的，然后循环遍历在页面中，当拖动删除的时候，删除掉数据库中的数据即可；然后刷新页面

     var  cat = document.getElementsByClassName('cat')//找到所有的猫咪

     for(var i = 0;i<cat.length;i++){

         var catSingle = cat[i];

         catSingle.ondragstart  = function(e){//循环遍历猫咪，当dragstart拖动开始的时候，setData设置他的id到e.dataTransfer中

             e.dataTransfer.setData('catId',this.id);

         }

     }

     fish.ondragenter = function(){//当如到鱼种时候，让鱼的透明度为1；

         console.log('已经拖入')

         fish.style.opacity ='1';

     }

     fish.ondragleave = function () {//拖动离开鱼的时候

         console.log('拖动离开');

         fish.style.opacity ='.2';

     }

     fish.ondragover = function (e) {//拖动悬浮在鱼上

         e.preventDefault()

     }

     fish.ondrop = function(e){//拖动放开时候；获取拖动开始时候设置的数据；然后从dom结构中移除；

         console.log('放开拖动')

         fish.style.opacity = '.2'

         var id = e.dataTransfer.getData('catId')

         console.log(id)

         var dragId = document.getElementById(id);

         dragId.parentNode.removeChild(dragId)

     }

 </script>

 </html>

案例三：将本地图片图拖动放置到浏览器中

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>拖动一张图片到浏览器中</title>

     <style>

         body{

             text-align: center;

         }

         #container {

             border: 1px solid #aaa;

             border-radius: 3px;

             padding: 10px;

             margin: 10px;

             min-height: 400px;

         }

     </style>

 </head>

 <body>

 <h1>拖放API的扩展知识</h1>

 <h3>请拖动您的照片到下方方框区域</h3>

 <div id="container"></div>

 <script>

     var container = document.getElementById('container')

    document.ondragover = function(e){

        e.preventDefault()

    }

    document.ondrop = function(e){

        e.preventDefault()

    }

    container.ondragover = function(e){

        e.preventDefault()

    }

    container.ondrop = function(e){

         var paper = e.dataTransfer.files[0];

         var file = new FileReader();

         file.readAsDataURL(paper)

        file.onload = function(){

             console.log('读取文件完成')

            console.log(file.result)

            var img = new Image();

             img.src =file.result;

             container.appendChild(img)

        }

    }

 </script>

 </body>

 </html>

注意事项：浏览器问题：当ondragover触发时，ondrop会失效，因此需要阻止ondragover的默认事件；

5.HTML5的新增文件操作对象

　　file:代表一个文件对象

　　filelist:代表一个文件列表对象；类数组；

　　fileReader:用于从文件中读取数据

　　FileWriter:用于向文件中写出数据；

　　相关函数：

 div.ondrop = function(e){

 var f = e.dataTransfer.files[0];      //找到拖放的文件

 var fr = new FileReader();        //创建文件读取器

 fr.readAsURLData(f);         //读取文件内容

 fr.onload = function(){       //读取完成

 img.src = fr.result;        //使用读取到的数据

 }

  }

巴特西

html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟）

最新文章

热门文章