HTML5拖动API

一、什么是拖拽和释放?

拖拽:Drag

释放:Drop

拖拽指的是鼠标点击源对象后一直移动对象不松手,一但松手即释放了

二、什么是源对象和目标对象?

源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等等。

目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入这个区域,可以在这个区域上方悬停(未松手),可以释松手释放将源对象放置此处(已松手),也可以悬停后离开该区域。

三、拖拽API的相关函数

被拖动的源对象可以触发的事件:

(1)ondragstart:源对象开始被拖动

(2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend:源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件:

(1)ondragenter:目标对象被源对象拖动着进入

(2)ondragover:目标对象被源对象拖动着悬停在上方

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

(4)ondrop:源对象拖动着在目标对象上方释放/松手

拖拽API总共就是7个函数!!

四、如何在拖动的源对象事件和目标对象事件间传递数据
  

HTML5为所有的拖动相关事件提供了一个新的属性:

e.dataTransfer { }          //数据传递对象

功能:用于在源对象和目标对象的事件间传递数据

  源对象上的事件处理中保存数据:

e.dataTransfer.setData( k,  v );     //k-v必须都是string类型

  目标对象上的事件处理中读取数据:

var v = e.dataTransfer.getData( k );

 

示例一:实现一个可以随着鼠标拖动而移动的div

提示:div需要绝对定位,ondrag事件中获取鼠标的坐标值

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin:0;
            position: relative;
        }
        div{
            position:absolute;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
<h3>随着鼠标拖动而移动的小飞机</h3>
<div id="p3"></div>
<script>
    p3.ondragstart=function(e){
        console.log('事件源p3开始拖动');
        //记录刚一拖动时,鼠标在飞机上的偏移量
        offsetX= e.offsetX;
        offsetY= e.offsetY;
    }
    p3.ondrag=function(e){
        console.log('事件源p3拖动中');
        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.ondragend=function(){
        console.log('源对象p3拖动结束');
    }
</script>
</body>
</html>

五、拖拽API的补充知识点

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;        //使用读取到的数据
    }
}

示例二:实现将图片上传至网页

<!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>
 
  <h1>拖放API的扩展知识</h1>
  <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>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值