然后拖动指针到一个新的职位(如其余DOM元素),然后拖动指针到一个新的岗位(如其余DOM元素)

图片反馈

图片反馈并不是必须安装的,默许它是从拖拽目的上扭转的一个半晶莹剔透图片,并且那一个图形在拖拽时期会随着鼠标移动。你可见由此setDragImage(image,xOffect,yOffect)方法自定义图片反馈。

setDragImage()接受三个参数,第二个参数表示图片引用,第四个和第七个代表图片左上角相对于鼠标指针的岗位。单位是像素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖动
    </div>
    <img src="test.jpg" id="img">
    <div class="drop"></div>
    <script type="text/javascript">

        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';
            event.dataTransfer.setDragImage(document.getElementById('img'),30,30);

        },false);

    </script>
</body>
</html>

DataTransferItemList对象的办法

1.add():向拖拽数据列表中添加一个新的拖拽数据,添加成功后回去那个新的拖拽数据。当添加一个文书到拖拽数据列表中,那几个方法只接受一个文本对象作为参数。当添加一个加以
类型的字符串到拖拽数据列表中,那个点子接受四个参数,第三个参数是数量,首个参数是体系。

2.remove(index):从拖拽数据列表中移除指定地点的拖拽数据。那几个办法接受一个象征地方的参数,假设这些参数小于0或者当先拖拽数据列表的尺寸,拖拽数据列表不会时有发生变更。

3.clear():移除拖拽数据列表中具有的拖拽数据。不须求参数。

4.DataTransferItem(index):得到指定地方上的拖拽数据。接受一个代表地点的参数,
那么些格局简写格局是数组索引。

DataTransferItemList对象的品质

1.length:得到拖拽数据的多少

DataTransferItem对象的习性

1.kind:获得拖拽数据的键,可能的值有file和string

2.type:获得拖拽数据的连串,是MINE type

DataTransferItem对象的办法

1.getAsFile():再次回到拖拽数据的文件对象。倘使拖拽数据不是文本则赶回null

2.getAsString(function):调用回调函数,那个回调函数将拖拽数据项的字符串格局作为它的参数

DataTransferItem对象的主意

1.getAsFile():重临拖拽数据的文件对象。假若拖拽数据不是文本则赶回null

2.getAsString(function):调用回调函数,那么些回调函数将拖拽数据项的字符串方式作为它的参数

DataTransferItem对象的质量

1.kind:获得拖拽数据的键,可能的值有file和string

2.type:得到拖拽数据的花色,是MINE type

Event types

Drag伊夫nt并不是一个纯粹的风浪,它富含了多个事件,这么些事件分别是:drag,dragstart,dragenter,dragend,dragover,dragexit,dragleave,drop。

drag:这些事件在要素拖拽的长河中反复触发,每一百飞秒触发一遍。那事件的目的元素是被拖的充足元素,该事件可冒泡,可撤废默认行为。

dragstart:那几个事件在用户起先拖动时接触。这一个事件的对象元素是被拖的相当元素,在那几个事件中,dragstart事件首先触发。该事件可冒泡,可裁撤默许行为。

dragenter:这一个事件在被拖的要素进入一个法定的可drop目的时接触。那一个事件的靶子元素是那么些可drop目的。该事件可冒泡,可打消默许行为。

dragover:当被拖的元素在可drop目的限制内移动时频仍触发这几个事件,一百阿秒触发一遍。那么些事件的靶子元素是以此可drop目的。该事件可冒泡,可打消默许行为。

dragend:当拖拽截至时接触这一个事件,这几个事件的靶子元素是被拖的因素。在那个事件中dragend最终触发。该事件可冒泡,不可以废除默许行为。

dragleave:这几个事件在被拖得元素离开合法的可drop目的时接触。这几个事件的靶子元素是以此可drop目的。该事件可冒泡,不可能取消默许行为。

dragexit:当一个可drop元素不再是拖拽操作方今的drop目的时接触那么些事件。那几个事件的对象元素是其一可drop元素。该事件可冒泡,不嫩打消默许行为。

drop:当在可drop目的上甩手拖动元素的指针设备时接触那一个事件,该事件的靶子元素是那些可drop目的。drop事件在dragend事件触发以前接触。那几个事件可冒泡,可废除默许行为。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖动
    </div>
    <img src="test.jpg" id="img">
    <div class="drop"></div>
    <script type="text/javascript">
        document.addEventListener('drag',function(event){
            event.target.style.backgroundColor = 'black';
        },false);
        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';

        },false);
        document.addEventListener('dragend',function(event){
            event.target.style.backgroundColor = 'yellow';
        },false);
        document.addEventListener('dragover',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'blue';
        },false);
        document.addEventListener('dragenter',function(event){
            event.target.style.backgroundColor = 'green';
        },false);
        document.addEventListener('dragleave',function(event){
            event.target.style.backgroundColor = 'pink';
        },false);
        document.addEventListener('dragexit',function(event){
            event.target.style.backgroundColor = 'red'
        },false);
        document.addEventListener('drop',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'white';
            console.log(2);


        },false)
    </script>
</body>
</html>

那个事件的事件目标涵盖鼠标事件的风浪目的的艺术与特性。之外还设有一个dataTransfer属性

让要素可拖

在HTML中默许可拖的要素唯有image,link及被增选的文件。要让其他因素可拖,需求做上边这三件事:

1.给元素设置一个draggable属性,并且将以此特性的值设置为true

2.在那个因素上添加一个dragstart的风波监听

3.在dragstart的风云监听上经过event.DataTransfer.setData(type,value)设置拖拽数据。

<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
      This text <strong>may</strong> be dragged.
    </div>

如果draggable属性被禁止或者设置为false,那么那些因素不能被拖拽。draggable属性可以在其他性质上设置。当一个因素设置为可拖,在那么些元素上点击或拖动鼠标,那么些因素里的文件或任何因素不会被选中。当用户伊始拖动,dragstart事件会被触发,在dragstart事件中,你可见由此setData()指定拖拽数据,通过setDragImage()指定图片反馈,以及经过安装effectAllowed属性和dropEffect属性指定拖拽效果。拖拽数据是必须指定的,可是图片反馈是拖拽效果不是必须的

DataTransferItem对象

dataTransfer.items中的每一项都是DataTransferItem对象。

DataTransferItemList对象

由此dataTransfer.items得到的值就是DataTransferList对象。

DataTransferItemList对象的特性

1.length:获得拖拽数据的数量

Drag伊芙nt是一个代表drag和drop交互的DOM
event接口。用户通过将指针设备(如:鼠标)放在目标的表面开始拖动,然后拖动指针到一个新的任务(如别的DOM元素)。应用程序自动的分析拖放交互。Drag伊芙nt接口从mouse伊芙nt和伊芙nt那儿继承属性。

DataTransferItemList对象

通过dataTransfer.items获得的值就是DataTransferList对象。

拖拽效果

通过安装effectAllowed和dropEffect可以指定拖拽效果

拖拽文件

要使文件可以被拖放的一个首要步骤是概念一个停放区域。并且为停放区域添加drop,dragover和dragend事件处理程序。

当为一个因素添加drop事件的处理程序,及在dragover事件处理程序中收回浏览器的默许行为,那么这么些因素就是停放区域。

别的,在drag和drop操作停止之后,应用程序应该移除拖拽数据(可能是一个要么多个公文),数据的清理平常在
dragend事件处理程序中。

<div id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)">
  <strong><Drag one or more files to this Drop Zone ...</strong>
</div>

 

事例一,访问文件名

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // If dropped items aren't files, reject them
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i=0; i < dt.items.length; i++) {
      if (dt.items[i].kind == "file") {
        var f = dt.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + f.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i=0; i < dt.files.length; i++) {
      console.log("... file[" + i + "].name = " + dt.files[i].name);
    }
  }
}

事例二,阻止浏览器默许行为

function dragover_handler(ev) {
  console.log("dragOver");
  // Prevent default select and drag behavior
  ev.preventDefault();
}

 例子三,清除数据

function dragend_handler(ev) {
  console.log("dragEnd");
  // Remove all of the drag data
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to remove the drag data
    for (var i = 0; i < dt.items.length; i++) {
      dt.items.remove(i);
    }
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

 

dataTransfer属性中的标准属性

1.dropEffect

得到当前drag and drop操作的档次,或者设置给当下drag and drop
设置新的体系。那些特性可能取值是none,copy,move,link。那属性会影响拖拽进度中的鼠标的来得形式。

2.effectAllowed

以此特性用于指定运行的拖拽操作作用,可选的值有none,all,copy,move,link,copyLink,copyMove,linkMove。默许情状这几个值是all,若是要安装那么些特性的值就要在dragstart的事件处理程序里开展安装。

3.files

含蓄了在data
transfer中的所有可用的当地文件列表,倘诺被拖拽操作没有涉及文件,那么它是一个空列表。

4.items

是一个饱含了具备拖拽数据的列表。它是一个DataTransferItemList对象。

5.types

它是一个字符串数组,这么些数组中富含在dragstart事件处理程序中安装的拖拽事件的体系,如果拖拽操作不存在数据,那么她得到一个空数组。

事件目的的dataTransfer属性

dataTransfer属性是一个DataTransfer对象,在那几个特性中保留了拖拽操作进度中的数据,它可能保留一个如故多少个数据项。那几个特性是只读的。

DataTransferItem对象

dataTransfer.items中的每一项都是DataTransferItem对象。

图片反馈

图片反馈并不是必须安装的,默许它是从拖拽指标上变化的一个半晶莹剔透图片,并且那么些图形在拖拽时期会随着鼠标移动。你可见因此setDragImage(image,xOffect,yOffect)方法自定义图片反馈。

setDragImage()接受多个参数,首个参数表示图片引用,第三个和第多少个象征图片左上角相对于鼠标指针的地点。单位是像素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖动
    </div>
    <img src="test.jpg" id="img">
    <div class="drop"></div>
    <script type="text/javascript">

        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';
            event.dataTransfer.setDragImage(document.getElementById('img'),30,30);

        },false);

    </script>
</body>
</html>

DataTransferItemList对象的办法

1.add():向拖拽数据列表中添加一个新的拖拽数据,添加成功后回到那一个新的拖拽数据。当添加一个文件到拖拽数据列表中,那几个法子只接受一个文书对象作为参数。当添加一个加以
类型的字符串到拖拽数据列表中,这几个点子接受多个参数,第一个参数是数量,首个参数是项目。

2.remove(index):从拖拽数据列表中移除指定地方的拖拽数据。这么些点子接受一个代表地方的参数,如若这一个参数小于0或者高于拖拽数据列表的长短,拖拽数据列表不会爆发转移。

3.clear():移除拖拽数据列表中具有的拖拽数据。不要求参数。

4.DataTransferItem(index):得到指定地方上的拖拽数据。接受一个表示地方的参数,
这几个法子简写方式是数组索引。

拖拽数据

拖拽数据包括两局地音讯,分别是数据的类型和数据的值,数据的门类是字符串,数据的值也是字符串方式。
拖拽数据的项目有:text/plain,text/html,image/jpeg,text/uri-list等,还能自定义类型。

可以屡屡调用setData()方法设置多少个拖拽数据。如下:

var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');

application/x-bookmark是自定义类型。

设若由此这么些情势设置新的类其余多少,那么那个新的拖拽数据会位于拖拽数据列表的尾巴,假若设置以及存在的类型的数量,那么新的数据会覆盖旧的数目。

透过getData()可以获取指定项目标拖拽数据

经过clearData()可以清除指定项目的拖拽数据

DataTransfer属性的规范方法

1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数,即使那么些参数是空或者没有点名,那么移除所以类型的数码,若是指定的品类不存在或者data
transfer中不带有数据,那么那个措施不会发生哪些影响。

2.getData(type):得到指定项目标拖拽数据。若是指定项目标多少不存在或者data
transfer中不包罗数据, 得到一个空的字符串。

3.setData(type,value):设置给定类型的拖拽数据。接受八个参数,第四个参数是种类,首个参数是指定类型的值。
如果那么些项目标值不存在,那么在档次列表的末段添加一个新的格式,要是已经存在的,那么在平等的地点存在的数额被替换.

4.setDragImage(image,xoffset,yoffset):接受多少个参数,第三个参数是图表的引用,首个和第多个参数是移动的图形的
左上角相持鼠标的地方。

让要素可拖

在HTML中默许可拖的因素只有image,link及被选拔的公文。要让其他因素可拖,需求做上边那三件事:

1.给元素设置一个draggable属性,并且将这几个特性的值设置为true

2.在这么些元素上添加一个dragstart的事件监听

3.在dragstart的事件监听上通过event.DataTransfer.setData(type,value)设置拖拽数据。

<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
      This text <strong>may</strong> be dragged.
    </div>

如若draggable属性被明令禁止或者安装为false,那么那么些元素不可能被拖拽。draggable属性可以在任何性质上安装。当一个要素设置为可拖,在这么些元素上点击或拖动鼠标,那些因素里的文本或其他因素不会被选中。当用户起头拖动,dragstart事件会被触发,在dragstart事件中,你可见通过setData()指定拖拽数据,通过setDragImage()指定图片反馈,以及因而设置effectAllowed属性和dropEffect属性指定拖拽效果。拖拽数据是必须指定的,可是图片反馈是拖拽效果不是必须的

Event types

Drag伊夫nt并不是一个十足的事件,它包罗了四个事件,那么些事件分别是:drag,dragstart,dragenter,dragend,dragover,dragexit,dragleave,drop。

drag:这一个事件在要素拖拽的经过中频仍触发,每一百阿秒触发一遍。那事件的目的元素是被拖的百般元素,该事件可冒泡,可收回默许行为。

dragstart:这么些事件在用户开头拖动时接触。这么些事件的靶子元素是被拖的卓殊元素,在那些事件中,dragstart事件首先触发。该事件可冒泡,可收回默许行为。

dragenter:这一个事件在被拖的要素进入一个官方的可drop目的时接触。这一个事件的对象元素是这一个可drop目的。该事件可冒泡,可撤销默许行为。

dragover:当被拖的因素在可drop目的范围内移动时反复触发那一个事件,一百皮秒触发四回。那么些事件的靶子元素是这么些可drop目的。该事件可冒泡,可收回默许行为。

dragend:当拖拽截止时接触那些事件,这么些事件的对象元素是被拖的要素。在这个事件中dragend最终触发。该事件可冒泡,不可以裁撤默许行为。

dragleave:那些事件在被拖得元素离开合法的可drop目标时接触。那一个事件的靶子元素是这一个可drop目标。该事件可冒泡,不可以撤销默许行为。

dragexit:当一个可drop元素不再是拖拽操作近日的drop目的时接触那些事件。那些事件的对象元素是其一可drop元素。该事件可冒泡,不嫩打消默许行为。

drop:当在可drop目的上松手拖动元素的指针设备时接触这些事件,该事件的靶子元素是这么些可drop目标。drop事件在dragend事件触发在此之前接触。那么些事件可冒泡,可撤消默认行为。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖动
    </div>
    <img src="test.jpg" id="img">
    <div class="drop"></div>
    <script type="text/javascript">
        document.addEventListener('drag',function(event){
            event.target.style.backgroundColor = 'black';
        },false);
        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';

        },false);
        document.addEventListener('dragend',function(event){
            event.target.style.backgroundColor = 'yellow';
        },false);
        document.addEventListener('dragover',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'blue';
        },false);
        document.addEventListener('dragenter',function(event){
            event.target.style.backgroundColor = 'green';
        },false);
        document.addEventListener('dragleave',function(event){
            event.target.style.backgroundColor = 'pink';
        },false);
        document.addEventListener('dragexit',function(event){
            event.target.style.backgroundColor = 'red'
        },false);
        document.addEventListener('drop',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'white';
            console.log(2);


        },false)
    </script>
</body>
</html>

那几个事件的事件目的涵盖鼠标事件的事件目的的法子与特性。之外还设有一个dataTransfer属性

dataTransfer属性中的标准属性

1.dropEffect

得到当前drag and drop操作的种类,或者设置给当下drag and drop
设置新的序列。那个特性可能取值是none,copy,move,link。那属性会影响拖拽进程中的鼠标的来得方式。

2.effectAllowed

本条特性用于指定运行的拖拽操作功能,可选的值有none,all,copy,move,link,copyLink,copyMove,linkMove。默认情状那么些值是all,借使要安装这么些特性的值就要在dragstart的事件处理程序里开展安装。

3.files

含蓄了在data
transfer中的所有可用的当地文件列表,如果被拖拽操作没有涉嫌文件,那么它是一个空列表。

4.items

是一个饱含了具备拖拽数据的列表。它是一个DataTransferItemList对象。

5.types

它是一个字符串数组,那一个数组中富含在dragstart事件处理程序中安装的拖拽事件的系列,如若拖拽操作不设有多少,那么她得到一个空数组。

拖拽文件

要使文件可以被拖放的一个重中之重步骤是概念一个停放区域。并且为停放区域添加drop,dragover和dragend事件处理程序。

当为一个因素添加drop事件的处理程序,及在dragover事件处理程序中废除浏览器的默许行为,那么这么些元素就是放置区域。

此外,在drag和drop操作为止之后,应用程序应该移除拖拽数据(可能是一个或者多个文件),数据的清理经常在
dragend事件处理程序中。

<div id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)">
  <strong><Drag one or more files to this Drop Zone ...</strong>
</div>

 

事例一,访问文件名

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // If dropped items aren't files, reject them
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i=0; i < dt.items.length; i++) {
      if (dt.items[i].kind == "file") {
        var f = dt.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + f.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i=0; i < dt.files.length; i++) {
      console.log("... file[" + i + "].name = " + dt.files[i].name);
    }
  }
}

事例二,阻止浏览器默许行为

function dragover_handler(ev) {
  console.log("dragOver");
  // Prevent default select and drag behavior
  ev.preventDefault();
}

 例子三,清除数据

function dragend_handler(ev) {
  console.log("dragEnd");
  // Remove all of the drag data
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to remove the drag data
    for (var i = 0; i < dt.items.length; i++) {
      dt.items.remove(i);
    }
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

 

拖拽效果

透过安装effectAllowed和dropEffect可以指定拖拽效果

拖拽数据

拖拽数据包含两片段音讯,分别是数量的品类和数量的值,数据的类型是字符串,数据的值也是字符串格局。
拖拽数据的门类有:text/plain,text/html,image/jpeg,text/uri-list等,仍能自定义类型。

可以频仍调用setData()方法设置多少个拖拽数据。如下:

var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');

application/x-bookmark是自定义类型。

若果通过这几个办法设置新的档次的数额,那么这么些新的拖拽数据会位于拖拽数据列表的尾巴,即使设置以及存在的类其余数据,那么新的数据会覆盖旧的数量。

经过getData()可以赢得指定项目标拖拽数据

通过clearData()可以消除指定项目标拖拽数据

DataTransfer属性的正经措施

1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数,借使那一个参数是空或者尚未点名,那么移除所以类型的数目,如若指定的连串不设有或者data
transfer中不包蕴数据,那么那一个法子不会发出什么震慑。

2.getData(type):获得指定项目标拖拽数据。倘使指定项目标数额不设有或者data
transfer中不包括数据, 得到一个空的字符串。

3.setData(type,value):设置给定类型的拖拽数据。接受五个参数,第三个参数是项目,第四个参数是指定类型的值。
假若这么些类型的值不设有,那么在品种列表的结尾添加一个新的格式,如若已经存在的,那么在平等的职位
存在的数码被替换.

4.setDragImage(image,xoffset,yoffset):接受七个参数,第四个参数是图片的引用,第三个和第多个参数是活动的图形的
左上角相对鼠标的职位。

事件目的的dataTransfer属性

dataTransfer属性是一个DataTransfer对象,在这几个特性中保留了拖拽操作进度中的数据,它恐怕保留一个或者多少个数据项。那个特性是只读的。

Drag伊夫nt是一个意味着drag和drop交互的DOM
event接口。用户通过将指针设备(如:鼠标)放在目的的外部早先拖动,然后拖动指针到一个新的岗位(如其余DOM元素)。应用程序自动的解析拖放交互。Drag伊夫nt接口从mouse伊夫nt和伊芙nt这儿继承属性。