其他分享
首页 > 其他分享> > HTML5 drag api 的使用

HTML5 drag api 的使用

作者:互联网

一、基础概念

拖拽:Drag  释放:Drop

1、拖拽指的是鼠标点击源对象后一直移动对象不松手,一但松手即释放了 2、源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等等 目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入这个区域,可以在这个区域上方悬停(未松手),可以释松手释放将源对象放置此处(已松手),也可以悬停后离开该区域。   二、拖拽API相关函数 被拖动的源对象可以触发的事件: 1、ondragstart   源对象开始被拖动 2、ondrag  源对象被拖动过程中(鼠标可能在移动也可能未移动) 3、ondragend   源对象被拖动结束   拖动对象进入到目标对象区域可以触发的事件 1、ondragenter  目标对象被源对象拖动着进入 2、ondragover  目标对象被源对象拖动着悬停在上方 3、ondragleave  源对象拖动着离开了目标对象 4、ondrop   源对象拖动着在目标对象上方释放/松手   三、如何在拖动的源对象事件和目标对象事件之间传递数据 HTML5为所有的拖动相关事件提供了一个新的属性 e.dataTransfer  数据传递对象(用于在源对象事件和目标对象事件之间传递数据)   源对象事件中保存数据: e.dataTransfer.setData(k, v)   k和v 都必须是string类型   目标对象上的事件处理中读取数据: let v = emdataTransfer.getData( k )   四:案例   示例一:实现一个可以随着鼠标拖动而移动的效果
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin:0;
            position: relative;
        }
        img{
            position:absolute;
        }
    </style>
</head>
<body>
<img id="p3" src="img/p3.png" alt=""/>
<script>
    p3.οndragstart=function(e){
        console.log('事件源p开始拖动');
        offsetX= e.offsetX;
        offsetY= e.offsetY;
    }
    p3.οndrag=function(e){
        console.log('事件源p拖动中');
        var x= e.pageX;
        var y= e.pageY;
        console.log(x+'-'+y);
        //drag事件最后一刻,无法读取鼠标的坐标,pageX和pageY都变为0
        if(x==0 && y==0){
            return; //不处理拖动最后一刻X和Y都为0的情形
        }
        x-=offsetX;
        y-=offsetY;
 
        p3.style.left=x+'px';
        p3.style.top=y+'px';
    }
    p3.οndragend=function(){
        console.log('源对象p拖动结束');
    }
</script>
</body>
</html>

 

示例二:模拟电脑中 ”垃圾桶“的效果, 总共显示三个div方块,拖动着某个小方块到垃圾桶上方后,小方块从DOM树上删除

提示:删除需要从DOM子节点中删除元素,需要阻止ondragover的默认行为,利用源对象和目标对象的数据传递记录小方块的ID值!!!

注意:ondragover有一个默认行为,那就是当ondragover触发时,ondrop会失效,这个可能是浏览器的版本问题,以后浏览器不断更新可能会解决 注意:img标签,被选中的文字等都是自带可以拖拽的,如果元素是一个DIV,默认是不能拖拽的,所以要给DIV的属性设置draggable="true"开启可拖拽状态 如何阻止默认行为?
ondragover= function(e){  //源对象在悬停在目标对象上时
  e.preventDefault();  //阻止默认行为,使得drop可以触发
    .....
}
ondrop= function(e){  //源对象松手释放在了目标对象中
    .....
}
<!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{
            width: 80px;
            height: 80px;
            margin-top: 200px;
            opacity: .2;
            background-color: yellow;
        }
        .cat{
          width: 50px;
          height: 50px;
          background-color: red;
          margin: 10px;
        }
    </style>
</head>
<body>
 <div class="cat" id="cat1" draggable="true" > </div>
 <div class="cat" id="cat2" draggable="true" > </div>
 <div class="cat" id="cat3" draggable="true" > </div>
 <br>
 <div   id="fish"  ></div>
</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中
            console.log('e.dataTransfer',e.dataTransfer)
            e.dataTransfer.setData('catId',this.id);
            console.log('e.dataTransfer',e.dataTransfer)
        }
    }
    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>

  

示例二:将本地图片图拖动放置到浏览器中指定区域显示

相关知识点普及

1、HTML5新增文件操作对象

File  代表一个文件对象

FileList  代表一个文件列表对象,类数组

FileReader 用于从文件中读取数据

FileWrite  用于像文件中写数据

相关函数

div.ondrop = function(e){

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

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

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

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

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

}

 }
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #container {
      border: 1px solid #aaa;
      border-radius: 3px;
      padding: 10px;
      margin: 10px;
      min-height: 400px;
    }
  </style>
</head>
<body>
 
  <h3>拖动照片到下方方框区域</h3>
  <div id="container"></div>
 
  <script>
    //监听document的drop事件——取消其默认行为:在新窗口中打开图片
    document.ondragover = function(e){
      e.preventDefault(); //使得drop事件可以触发
    }
    document.ondrop = function(e){
      e.preventDefault(); //阻止在新窗口中打开图片,否则仍然会执行下载操作!!!
    }
 
    //监听div#container的drop事件,设法读取到释放的图片数据,显示出来
    container.ondragover = function(e){
      e.preventDefault();
    }
    container.ondrop = function(e){
      console.log('客户端拖动着一张图片释放了...')
      //当前的目标对象读取拖放源对象存储的数据
      //console.log(e.dataTransfer); //显示有问题
      //console.log(e.dataTransfer.files.length); //拖进来的图片的数量
      var f0 = e.dataTransfer.files[0];
      //console.log(f0); //文件对象 File
 
      //从文件对象中读取数据
      var fr = new FileReader();
      //fr.readAsText(f0); //从文件中读取文本字符串
      fr.readAsDataURL(f0); //从文件中读取URL数据
      fr.onload = function(){
        console.log('读取文件完成')
        console.log(fr.result);
        var img = new Image();
        img.src = fr.result; //URL数据
        container.appendChild(img);
      }
    }
 
  </script>
</body>
</html>

 

 

 

 

标签:function,fr,console,log,对象,拖动,drag,api,HTML5
来源: https://www.cnblogs.com/liumingwang/p/14964351.html