HTML5 드래그 앤 드롭 기능 예제에 대한 자세한 설명
- 零下一度원래의
- 2017-07-16 15:37:271648검색
HTML5는 전용 드래그 앤 드롭 API를 제공하므로 앞으로 이런 종류의 효과를 얻기 위해 혼란을 겪을 필요가 없습니다. 하지만 오페라 브라우저는 이에 관심을 두지 않는 것 같고, 그 다용도성은 아직 의문의 여지가 있다는 점을 고려하면 여기서는 이에 대해 간략하게 이야기하겠습니다. 드래그 앤 드롭은 html5 표준의 일부입니다.
브라우저 지원
Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다.
드래그된 요소, dragElement:
1. 이벤트 추가: ondragstart
2. 속성 추가: dragable
Place 요소, dropElement:
1.
는 마우스 인/아웃과 같은 이벤트와 매우 유사하며 아래에서는 설명을 위해 자세히 설명하지 않겠습니다.
1. 페이지의 요소 간 드래그 앤 드롭
다음은 각 이벤트가 어떻게 트리거되는지 보여주는 p 간 드래그 앤 드롭의 작은 예입니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
#dropEle
p
{
float: left;
}
</style>
<script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 拖放（Drag 和 drop）是 HTML5 标准的组成部分。
* 浏览器支持
*Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
*/
$(function ()
{
$("#dragEle")[0].ondragstart = function (event)
{
console.log("dragStart");
event.dataTransfer.setData("Text", event.target.id);
};
/**
* 当放置被拖数据时，会发生 drop 事件。
* 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
* @param event
*/
$("#dropEle")[0].ondrop = function (event)
{
/* for (var p in event.dataTransfer)
{
console.log(p + " = " + event.dataTransfer[p] + " @@");
}
*/
console.log("onDrop");
var id = event.dataTransfer.getData("Text");
$(this).append($("#" + id).clone().text($(this).find("p").length));
event.preventDefault();
};
/**
* ondragover 事件规定在何处放置被拖动的数据。
*默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
*/
$("#dropEle")[0].ondragover = function (event)
{
console.log("onDrop over");
event.preventDefault();
}
$("#dropEle")[0].ondragenter = function (event)
{
console.log("onDrop enter");
}
$("#dropEle")[0].ondragleave = function (event)
{
console.log("onDrop leave");
}
$("#dropEle")[0].ondragend = function (event)
{
console.log("onDrop end");
}
});
</script>
</head>
<body>
<p style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
draggable="true" id="dragEle" >
</p>
<p style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
id="dropEle"></p>
</body>
</html>몇 가지 참고 사항:
a, ondragover 이벤트의 기본 동작은 구성되어야 하며 기본적으로 데이터/요소는 다른 요소에 배치될 수 없습니다.
b. 드롭 이벤트의 기본 동작은 링크로 여는 것이므로 기본 동작도 방지해야 합니다.
또한 알 수 있습니다: 드래그 앤 드롭 시 이벤트에 event.dataTransfer 개체가 포함됩니다. 위의 예에서는 개체의 setData 메서드를 사용하여 드래그된 p의 ID를 전달한 다음 drop, 요소가 복사되어 배치된 p에 추가됩니다.
다음은 이 개체의 다른 메서드를 소개합니다.
event.dataTransfer:
items = [object DataTransferItemList] @@drag_drop.html:44
files = [object FileList] @@drag_drop.html:44
types = 텍스트/일반 @@drag_drop.html:44
effectAllowed = 모두 @@drag_drop.html:44
dropEffect = 없음 @@drag_drop.html:44
clearData = functionclearData() { [네이티브 코드] } @ @drag_drop.html:44
getData = function getData() { [네이티브 코드] } @@drag_drop.html:44
setData = function setData() { [네이티브 코드] } @@drag_drop.html:44
setDragImage = function setDragImage() { [native code] } @@
JS를 사용하여 모든 속성을 인쇄했습니다.
1. 위의 예에서는 getData, setData가 사용되었으며, ClearData는 설정된 데이터를 지우는 것입니다.
2 파일을 운영 체제에서 선택한 하나 이상의 파일을 p로 드래그하면 드래그된 파일의 정보가 파일에 저장되며 이를 통해 파일 형식과 길이를 얻을 수 있습니다. 파일이 업로드됩니다.
3. setDragImage(image, x, y)는 마우스 이동 중에 마우스로 움직이는 효과 이미지를 설정하는 데 사용됩니다. dragstart에서 설정해야 합니다.
4. Types, effectAllowed 및 dropEffect는 각각 드래그되는 요소의 유형과 드래그 프로세스 중 마우스에 의해 표시되는 스타일이라고 생각합니다. 이러한 속성은 무시할 수 있으며 일반적으로 사용되지 않습니다.
관련 핵심 사항
DataTransfer 개체: 드롭 개체를 전송하는 데 사용되는 매체, 일반적으로 Event.dataTransfer입니다.
draggable 속성: 태그 요소는 draggable=true로 설정되어야 합니다. 그렇지 않으면 아무런 효과가 없습니다. 예:
4a95d3c4ade92cc9d5287984159187afList 116b28748ea4df4d9c2150843fecfba68
ondragstart 이벤트: 드래그 요소가 드래그되기 시작할 때 발생하는 이벤트.
ondragenter 이벤트: 드래그된 요소가 대상 요소에 들어갈 때 발생하는 이벤트.
ondragover 이벤트: 드래그된 요소가 대상 요소에서 움직일 때 발생하는 이벤트.
ondrop 이벤트: 드래그된 요소가 대상 요소에서 이동하고 마우스를 놓을 때 발생하는 이벤트. 동시에 이 이벤트는 대상 요소에서 작동합니다.
ondragend 이벤트: 드래그가 완료되면 트리거되는 이벤트입니다.
Event.preventDefault() 메서드: 일부 실행을 방지합니다. 기본 이벤트 방법. PreventDefault()는 ondragover에서 실행되어야 합니다. 그렇지 않으면 ondrop 이벤트가 트리거되지 않습니다. 또한, 다른 애플리케이션이나 파일, 특히 사진에서 무언가를 드래그하는 경우 기본 동작은 사진이나 관련 정보를 표시하는 것이며 실제로 드롭을 실행하지는 않습니다. 이때 문서를 직접 종료하려면 문서의 ondragover 이벤트를 사용해야 합니다.
Event. effectAllowed 속성: 드래그 효과입니다.
위 내용은 HTML5 드래그 앤 드롭 기능 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!