当前位置:美高梅游戏 > 银河护卫队图片 > 然后拖动指针到一个新的位置(如其他DOM元素)

然后拖动指针到一个新的位置(如其他DOM元素)

文章作者:银河护卫队图片 上传时间:2019-11-28

DataTransferItemList对象的格局

1.add():向拖拽数据列表中增加贰个新的拖拽数据,增添成功后回来这一个新的拖拽数据。当加多一个文件到拖拽数据列表中,这么些办法只接收一个文书对象作为参数。当增添叁个加以 类型的字符串到拖拽数据列表中,那个主意采用三个参数,第叁个参数是数据,第二个参数是项目。

2.remove(index):从拖拽数据列表中移除钦命地点的拖拽数据。那个措施接收二个象征地点的参数,假诺那一个参数小于0或然超过拖拽数据列表的长短,拖拽数据列表不会时有产生转移。

3.clear():移除拖拽数据列表中具备的拖拽数据。无需参数。

4.DataTransferItem(index):获得钦赐地方上的拖拽数据。选择四个意味着地方的参数, 这几个办法简写格局是数组索引。

Event types

Drag伊夫nt并不是贰个十足的事件,它包蕴了多少个事件,那一个事件分别是:drag,dragstart,dragenter,dragend,dragover,dragexit,dragleave,drop。

drag:这些事件在要素拖拽的进度中频仍触发,每一百皮秒触发一回。这件事件的靶子元素是被拖的不胜元素,该事件可冒泡,可撤除私下认可行为。

dragstart:这么些事件在客商开端拖动时接触。这一个事件的对象成分是被拖的不得了成分,在此些事件中,dragstart事件首先触发。该事件可冒泡,可撤废私下认可行为。

dragenter:这一个事件在被拖的要素步向四个法定的可drop指标时接触。那么些事件的靶子成分是那几个可drop指标。该事件可冒泡,可撤除私下认可行为。

然后拖动指针到一个新的位置(如其他DOM元素)。然后拖动指针到一个新的位置(如其他DOM元素)。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>

然后拖动指针到一个新的位置(如其他DOM元素)。这个事件的事件指标包括鼠标事件的风浪指标的艺术与品质。之外还设有二个dataTransfer属性

拖拽数据

拖拽数据满含两片段消息,分别是数量的品种和数量的值,数据的花色是字符串,数据的值也是字符串情势。 拖拽数据的档案的次序有: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.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事件管理程序中设置的拖拽事件的连串,即使拖拽操作不设有数量,那么她收获叁个空数组。

DataTransferItem对象

dataTransfer.items中的每大器晚成项都以DataTransferItem对象。

拖拽效果

由此设置effectAllowed和dropEffect能够钦点拖拽效果

DataTransferItem对象的属性

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

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

DataTransferItem对象的办法

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

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

图表反馈

图形反馈并非必得安装的,默许它是从拖拽目的上转换的三个半晶莹剔透图片,而且那些图形在拖拽时期会随之鼠标移动。你可见通过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>

让要素可拖

在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属性钦定拖拽效果。拖拽数据是必得内定的,可是图片反馈是拖拽效果不是必得的

DataTransfer属性的正统措施

1.clearData(type):移除给定类型相关的拖拽数据。接纳一个可选的参数,即使那个参数是空只怕尚未点名,那么移除所以类型的多少,假使钦命的类型空中楼阁或许data transfer中不带有数据,那么那些法子不会发出哪些影响。

2.getData(type):获得钦定项目标拖拽数据。如若钦定项指标数据官样文章或然data transfer中不带有数据, 获得多个空的字符串。

3.setData(type,value):设置给定类型的拖拽数据。选拔四个参数,第三个参数是系列,第三个参数是钦定类型的值。 借使那个类别的值海市蜃楼,那么在品种列表的尾声增加叁个新的格式,要是已经存在的,那么在同豆蔻梢头的职位 存在的多寡被替换.

4.setDragImage(image,xoffset,yoffset):选用多个参数,第叁个参数是图形的引用,第2个和第多个参数是运动的图形的 左上角对峙鼠标的职位。

DataTransferItemList对象

由此dataTransfer.items获得的值正是DataTransferList对象。

Drag伊芙nt是三个表示drag和drop交互作用的DOM event接口。客商通过将指针设备(如:鼠标卡塔 尔(英语:State of Qatar)放在指标的外界初阶拖动,然后拖动指针到八个新的任务(如别的DOM成分卡塔 尔(英语:State of Qatar)。应用程序自动的剖析拖放人机联作。Drag伊芙nt接口从mouseEvent和伊芙nt那儿世襲属性。

事件目的的dataTransfer属性

dataTransfer属性是二个DataTransfer对象,在这里性格子中保存了拖拽操作进度中的数据,它或然保留一个依然五个数据项。那本性情是只读的。

拖拽文件

要使文件能够被拖放的三个至关心珍视要步骤是概念二个停放区域。并且为停放区域加多drop,dragover和dragend事件管理程序。

当为一个要素增加drop事件的管理程序,及在dragover事件管理程序中撤消浏览器的暗许行为,那么那个成分正是放置区域。

其余,在drag和drop操作甘休以后,应用程序应该移除拖拽数据(或者是一个也许三个文件卡塔 尔(英语:State of Qatar),数据的清理常常在 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();
  }
}

 

DataTransferItemList对象的质量

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

本文由美高梅游戏发布于银河护卫队图片,转载请注明出处:然后拖动指针到一个新的位置(如其他DOM元素)

关键词: