집 > 기사 > 웹 프론트엔드 > H5의 드래그 앤 드롭 기능에 대한 자세한 설명

H5의 드래그 앤 드롭 기능에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-27 09:59:462949검색

이번에는 H5의 드래그 앤 드롭 기능에 대한 자세한 설명을 가져왔습니다. H5의 드래그 앤 드롭 기능 구현 시 주의사항은 무엇인가요?

HTML5의 드래그 앤 드롭에 대하여

드래그 앤 드롭은 일반적인 기능입니다. 즉, 개체를 잡아서 다른 위치로 드래그하는 것이 HTML5에서는 표준 부분입니다. HTML5에서 사용자는 마우스를 사용하여 드래그 가능한 요소를 선택하고, 요소를 드롭 가능한 요소로 드래그하고, 마우스 버튼을 놓아 요소를 드롭할 수 있습니다. 드래그 가능한 요소의 반투명 표현은 드래그 작업 중에 마우스 포인터를 따릅니다.

요소를 드래그 가능하게 하려면 드래그 가능 속성을 true로 설정해야 합니다(a 태그의 드래그 가능은 기본적으로 true입니다)

드래그 앤 드롭 이벤트

여러 이벤트가 여러 단계에서 트리거됩니다. 드래그 앤 드롭 작업 이벤트, 드래그 앤 드롭 이벤트의 dataTransfer 속성은 드래그 앤 드롭 작업에 관련 데이터를 저장합니다.

dragstart	는 [소스 요소]에 작용하며 요소가 드래그되기 시작할 때 트리거됩니다. dragstart 이벤트는 사용자가 드래그한 요소에 첨부되어야 합니다. 이 이벤트에서 리스너는 드래그된 데이터, 이미지 등 이 드래그와 관련된 정보를 설정합니다.
dragenter	는 [소스 요소]에 작용하며 드래그하는 마우스가 요소에 들어갈 때 트리거됩니다. 이 이벤트의 리스너는 이 영역에서 마우스를 놓을 수 있는지 여부를 나타내야 합니다. 리스너가 설정되어 있지 않거나 리스너가 동작하지 않는 경우에는 기본적으로 해제가 허용되지 않습니다.
dragover	는 [대상 요소]에 작용하며 드래그하는 마우스가 요소를 지나갈 때 트리거됩니다.
dragleave	은 [대상 요소]에 작용하며 드래그하는 마우스가 요소를 떠날 때 트리거됩니다. 피드백을 공개하는 강조 표시 또는 삽입 표시로 제거할 수 있습니다.
drag	은 [소스 요소]에 작용하며, 요소를 드래그하면 이벤트가 트리거됩니다.
drop	은 [대상 요소]에 작용하고 드래그 작업이 완료되어 해제되면 해제된 요소에서 트리거됩니다.
dragend	는 [소스 요소]에 작용하며 작업 성공 여부에 관계없이 드래그 작업이 끝나면 드래그 소스가 트리거됩니다.

(드래그 시 드래그 관련 이벤트만 발생하고, mousemove 등의 마우스 이벤트는 발생하지 않음)

DataTransfer 객체

드래그 앤 드롭 작업을 처리할 때 다음을 사용해야 합니다. 드래그된 데이터를 저장하기 위해 DataTransfer 개체에 추가합니다. DataTransfer는 하나 이상의 데이터, 하나 이상의 데이터 유형을 저장할 수 있습니다.
Properties

파일과 동일하며 데이터 전송에 사용 가능한 모든 파일 목록이 포함되어 있습니다. 끌기 작업에 파일 끌기가 포함되지 않은 경우 이 속성은 빈 목록입니다. types 저장된 데이터의 종류 목록을 첫 번째 항목으로 데이터가 추가되는 순서대로 저장합니다. 데이터가 추가되지 않은 경우 빈 목록이 반환됩니다.

方法

dropEffect	dropEffect [문자열] 실제 배치 효과를 지정합니다. 가능한 값: 복사: 새 위치로 복사 move: 새로운 위치로 이동 링크: 원본 위치에서 새 위치로의 링크를 만듭니다 없음: 배치 금지(모든 작업에서 금지)
effectallowed	[string] 드래그 시 허용되는 효과 지정, 가능한 값: 복사: 새 위치로 복사합니다. move: 새로운 위치로 이동합니다. > 링크 : 원본 위치에서 새 위치로 링크를 설정합니다. copyLink: 복사 또는 링크를 허용합니다. copyMove: 복사 또는 이동을 허용합니다. linkMove: 링크 또는 이동을 허용합니다. ALL: 모든 작업을 허용합니다. 없음: 모든 작업이 금지됩니다. 초기화되지 않음: 기본값(기본값)은 all.

void addElement(Element element)	设置拖动源。通常不需要改变这项，如果修改这项将会影响拖动的哪个节点和dragend事件的触发。默认目标是被拖动的节点
void clearData(String type)	删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，将删除所有类型相关联的数据。如果不存在指定类型的数据，或数据传输不包含任何数据，此方法将没有任何效果。
String getData(String type)	获得给定类型的数据，如果给定类型的数据不存在或者数据转存没有包涵数据，方法将返回一个空字符串。
void setData(String type,String data)	为一个给定的类型设置数据。如果该数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。
void setDragImage(DOMElement image,long x,long y)	自定义一个期望的拖动时的图片。大多数情况下，这项不用设置，因为被拖动的节点被创建成默认图片。 image 要用作拖动反馈图像元素 x 图像内的水平偏移量. y 像内的垂直偏移量.

浏览器支持

Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5+

演示代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag & Drop</title>
<style type="text/css">
.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccccff;
    background-color: #ccccff;
    text-align: center;
    line-height: 100px;
}
.bin {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ccccff;
    overflow: hidden;
    float: left;
}
</style>
</head>
<body>
    <p style="display: table;">
        <p class="bin">
            <p class="box" draggable="true">可拖拽元素</p>
        </p>
        <p class="bin"> </p>
    </p>
    <script type="text/javascript">
        var bins = document.querySelectorAll('.bin');
        var boxs = document.querySelectorAll('.box');
        var drag = null;
        for (var i = 0; i < boxs.length; i++) {
            var box = boxs[i];
            box.onselectstart = function() {
                return false;
            };
            box.ondragstart = function(e) {
                e.dataTransfer.effectAllowed = &#39;move&#39;;
                e.dataTransfer.setData(&#39;text/plain&#39;, e.target.outerHTML);
                e.dataTransfer.setDragImage(e.target, 0, 0);
                drag = this;
                return true;
            };
            box.ondragend = function(e) {
                drag = null;
                return false
            };
        }
        for (var i = 0; i < bins.length; i++) {
            var bin = bins[i];
            //当拖曳元素进入目标元素
            bin.ondragover = function(e) {
                e.preentDefault();
                return true;
            };
            //拖拽元素在目标元素上移动
            bin.ondragenter = function(e) {
                this.style.backgroundColor = &#39;#eeeeff&#39;;
                return true;
            };
            //拖拽元素在目标元素上离开
            bin.ondragleave = function(e) {
                this.style.backgroundColor = &#39;#fff&#39;;
                return true;
            };
            //拖拽的元素在目标元素上同时鼠标放开
            bin.ondrop = function(e) {
                if (drag) {
                    drag.parentNode.removeChild(drag);
                    this.appendChild(drag);
                }
                this.style.backgroundColor = &#39;#fff&#39;;
                return false;
            };
        }
        document.body.ondrop = function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
    </script>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

H5의 드래그 앤 드롭 기능에 대한 자세한 설명

관련 기사