HTML5 DragEvent 인터페이스의 설명 예
- 零下一度원래의
- 2017-05-26 15:41:481970검색
DragEvent는 드래그 앤 드롭 간의 상호 작용을 나타내는 DOM 이벤트 인터페이스입니다. 사용자는 대상 표면에 포인팅 장치(예: 마우스)를 배치하여 드래그를 시작한 다음 포인터를 새 위치(예: 다른 DOM 요소)로 드래그합니다. 응용 프로그램은 끌어서 놓기 상호 작용을 자동으로 해결합니다. DragEvent 인터페이스는 mouseEvent 및 Event의 속성을 상속합니다.
이벤트 유형
DragEvent는 단일 이벤트가 아니며 여러 이벤트를 포함합니다. 이러한 이벤트는 drag, dragstart, dragenter, dragend, dragover, dragexit, dragleave , drop입니다.
드래그: 이 이벤트는 요소를 드래그하는 동안 100밀리초마다 한 번씩 반복적으로 트리거됩니다. 이 이벤트의 대상 요소는 드래그된 요소입니다. 이 이벤트는 버블링되어 기본 동작을 취소할 수 있습니다.
dragstart: 이 이벤트는 사용자가 드래그를 시작할 때 트리거됩니다. 이 이벤트의 대상 요소는 드래그되는 요소입니다. 이 이벤트 중 dragstart 이벤트가 먼저 발생합니다. 이 이벤트는 버블링되어 기본 동작을 취소할 수 있습니다.
dragenter: 이 이벤트는 드래그된 요소가 합법적인 드롭 가능한 대상에 들어갈 때 트리거됩니다. 이 이벤트의 대상 요소는 놓기 가능한 대상입니다. 이 이벤트는 버블링되어 기본 동작을 취소할 수 있습니다.
dragover: 이 이벤트는 드래그된 요소가 드롭 대상 범위 내에서 이동할 때 100밀리초마다 한 번씩 반복적으로 트리거됩니다. 이 이벤트의 대상 요소는 놓기 가능한 대상입니다. 이 이벤트는 버블링되어 기본 동작을 취소할 수 있습니다.
dragend: 이 이벤트는 드래그가 끝나면 트리거됩니다. 이 이벤트의 대상 요소는 드래그된 요소입니다. Dragend 화재는 이러한 이벤트 중 마지막에 발생합니다. 이 이벤트는 버블링될 수 있으며 기본 동작을 취소할 수 없습니다.
dragleave: 이 이벤트는 드래그된 요소가 합법적인 놓기 가능한 대상을 떠날 때 트리거됩니다. 이 이벤트의 대상 요소는 놓기 가능한 대상입니다. 이 이벤트는 버블링될 수 있으며 기본 동작을 취소할 수 없습니다.
dragexit: 이 이벤트는 놓기 가능한 요소가 더 이상 드래그 작업의 가장 가까운 놓기 대상이 아닐 때 트리거됩니다. 이 이벤트의 대상 요소는 놓기 가능한 요소입니다. 이 이벤트는 버블링될 수 있으며 기본 동작을 취소하지 않습니다.
drop: 이 이벤트는 드래그된 요소의 포인터 장치가 드롭 가능한 대상에서 놓일 때 트리거됩니다. dragend 이벤트가 발생하기 전에 drop 이벤트가 발생합니다. 이 이벤트는 버블링되어 기본 동작을 취소할 수 있습니다.
<!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>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<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에서는 기본적으로 드래그 가능한 요소는 이미지, 링크 및 선택한 텍스트뿐입니다. 다른 요소를 드래그 가능하게 만들려면 다음 세 가지를 수행해야 합니다.
1. 요소에 드래그 가능한 속성을 설정하고 이 속성의 값을 true로 설정합니다.
2. 요소 dragstart 이벤트 리스너 추가
3. dragstart 이벤트 리스너의 event.DataTransfer.setData(type, value)를 통해 드래그 데이터를 설정합니다.
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
This text <strong>may</strong> be dragged.
</p>draggable 속성이 비활성화되거나 false로 설정된 경우 이 요소를 드래그할 수 없습니다. draggable 속성은 모든 속성에 설정할 수 있습니다. 요소가 드래그 가능으로 설정된 경우 요소를 마우스로 클릭하거나 드래그해도 요소의 텍스트나 다른 요소가 선택되지 않습니다. 사용자가 드래그를 시작하면 dragstart 이벤트가 트리거됩니다. dragstart 이벤트에서는 setData()를 통해 드래그 데이터를 지정하고, setDragImage()를 통해 이미지 피드백을 지정하고, effectAllowed 속성과 dropEffect를 설정하여 드래그 효과를 지정할 수 있습니다. 기인하다. 드래그 데이터는 반드시 지정해야 하는데 그림 피드백은 드래그 효과가 필요없다는 것입니다
드래그 데이터
드래그 데이터에는 데이터 유형과 값이라는 두 부분의 정보가 포함됩니다. 의 데이터 유형은 String이고, 데이터 값도 문자열 형식입니다. 드래그 앤 드롭 데이터 유형에는 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()를 통해 지정된 유형의 드래그 앤 드롭 데이터를 삭제할 수 있습니다.
사진 피드백
이미지 피드백은 기본적으로 드래그 대상에서 생성된 반투명 이미지이며, 이 이미지는 드래그하는 동안 마우스 움직임을 따릅니다. 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>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<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>드래그 효과
효과허용 및 dropEffect
를 설정하여 드래그 효과를 지정할 수 있습니다.事件对象的dataTransfer属性
dataTransfer属性是一个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事件处理程序中设置的拖拽事件的类型，如果拖拽操作不存在数据，那么他得到一个空数组。
DataTransfer属性的标准方法
1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数，如果这个参数是空或者没有指定，那么移除所以类型的数据，如果指定的类型不存在或者data transfer中不包含数据，那么这个方法不会产生什么影响。
2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据， 得到一个空的字符串。
3.setData(type，value):设置给定类型的拖拽数据。接受两个参数，第一个参数是类型，第二个参数是指定类型的值。 如果这个类型的值不存在，那么在类型列表的最后添加一个新的格式，如果已经存在的,那么在相同的位置 存在的数据被替换.
4.setDragImage(image，xoffset，yoffset):接受三个参数，第一个参数是图片的引用，第二个和第三个参数是移动的图片的 左上角相对鼠标的位置。
DataTransferList对象
通过dataTransfer.items得到的值就是DataTransferList对象。
DataTransferList对象的属性
1.length:得到拖拽数据的数量
DataTransferList对象的方法
1.add()：向拖拽数据列表中添加一个新的拖拽数据，添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中，这个方法只接受一个文件对象作为参数。当添加一个给定 类型的字符串到拖拽数据列表中，这个方法接受两个参数，第一个参数是数据，第二个参数是类型。
2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数，如果这个参数小于0或者大于拖拽数据列表的长度，拖拽数据列表不会发生改变。
3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。
4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数， 这个方法简写形式是数组索引。
DataTransferItem对象
dataTransfer.items中的每一项都是DataTransferItem对象。
DataTransferItem对象的属性
1.kind：得到拖拽数据的键，可能的值有file和string
2.type：得到拖拽数据的类型，是MINE type
DataTransferItem对象的方法
1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null
2.getAsString(function):调用回调函数，这个回调函数将拖拽数据项的字符串形式作为它的参数
拖拽文件
要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop，dragover和dragend事件处理程序。
当为一个元素添加drop事件的处理程序，及在dragover事件处理程序中取消浏览器的默认行为，那么这个元素就是放置区域。
另外，在drag和drop操作结束之后，应用程序应该移除拖拽数据（可能是一个或者多个文件），数据的清理通常在 dragend事件处理程序中。
<p 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> </p>
例子一，访问文件名
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();
}
}【相关推荐】
1. 免费h5在线视频教程
2. 20분 안에 html5를 이해하고 H5에 어떤 새로운 기능이 있는지 알아보세요.
6. 🎜>합격 H5의 카메라 기능 구현 사례에 대한 자세한 설명
위 내용은 HTML5 DragEvent 인터페이스의 설명 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!