JavaScript 기본 드래그 앤 드롭에 대한 심층적인 이해에 대해 이야기합니다.
- 高洛峰원래의
- 2017-01-18 13:31:351054검색
이전 단어
드래그 앤 드롭(DnD)은 실제로 드래그 앤 드롭의 두 가지 동작입니다. 따라서 두 가지 요소가 포함됩니다. 하나는 드래그 앤 드롭 소스라고 하는 드래그된 요소이고, 다른 하나는 드래그 앤 드롭 대상이라고 하는 드롭할 대상입니다. 이번 글에서는 이 두 가지 개념을 나누어 네이티브 드래그 앤 드롭을 자세히 소개하겠습니다.
드래그 앤 드롭 소스
드래그 앤 드롭 소스는 어떤 요소인가요?
HTML5는 모든 HTML 요소에 대해 요소를 드래그할 수 있는지 여부를 나타내는 draggable 속성을 지정합니다.
이미지와 링크의 draggable 속성은 자동으로 true로 설정됩니다. 요소의 이 속성의 기본값은 false
[참고] Draggable='true'로 설정해야 적용되며, draggable 설정만 작동하지 않습니다
기본적으로 텍스트는 선택되어 있는 동안에만 드래그할 수 있으며, 이미지와 링크는 언제든지 드래그할 수 있습니다. 다른 요소는 드래그 앤 드롭할 수 없습니다
<input value="文字可拖动"> <img alt="图像可拖动" src="http://files.cnblogs.com/files/xiaohuochai/zan.gif"> <a href="#">链接可拖动</a> <div id="test" style="height:30px;width:300px;background:pink;">元素不可拖动</div>
해당 요소에 draggable 속성을 설정하면 일반 요소도 드래그할 수 있습니다
<div draggable="true" style="height:30px;width:100px;background:pink;"></div>
호환
IE9 브라우저는 draggable 속성을 지원하지 않지만 mousedown 이벤트 핸들러를 통해 dragDrop() 메서드를 호출하여 드래그 효과를 얻을 수 있습니다
<div id="test" style="height:30px;width:300px;background:pink;"></div>
<script>
test.onmousedown = function(){
this.dragDrop();
}
</script>
[참고] Firefox에서 draggable 속성을 지원하려면 ondragstart 이벤트 핸들러를 추가하고 dataTransfer 객체에 setData() 메서드를 사용하여 효과를 시작해야 합니다
드래그 앤 드롭 이벤트
드래그 앤 드롭 소스에는 3개의 드래그 앤 드롭 이벤트가 포함됩니다. 소스를 드래그 앤 드롭하면 dragstart, drag, dragend 세 가지 이벤트가 순차적으로 발생합니다.
dragstart
마우스 버튼을 누르고 마우스가 움직이기 시작하면 , dragstart 이벤트는 드래그 앤 드롭된 요소에서 트리거됩니다. 이때 커서는 "배치할 수 없음" 기호(원 안에 백슬래시가 있음)로 변경되어 해당 요소를 그 자체 위에 배치할 수 없음을 나타냅니다.
드래그
Trigger dragstart 이벤트 후 드래그 이벤트가 즉시 트리거되며, 이 이벤트는 요소가 드래그되는 동안 계속 트리거됩니다.
dragend
드래그가 중지되면(요소가 드래그되는 위치가 유효한 배치 대상에 배치되었는지, 유효하지 않은 배치 대상에 배치되었는지 여부) dragend 이벤트
<div id="test" draggable="true" style="height:30px;width:100px;background:pink;">0</div>
<script>
var timer,i=0;
test.ondragstart = function(){
this.style.backgroundColor = 'lightgreen';
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = i++;
},100)
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;
this.style.backgroundColor = 'pink';
}
</script>가 트리거됩니다
드래그 앤 드롭 대상
드래그 앤 드롭 대상은 마우스를 놓을 때 드래그된 요소가 배치되는 대상을 말합니다.
드래그 앤 드롭 소스가 있는 경우 드래그 앤 드롭 대상으로 드래그하면 dragenter, dragover 및 dragleave가 순서대로 트리거됩니다. 또는 이 네 가지 이벤트를 삭제합니다
dragenter
요소가 드래그되는 한 드롭 대상에 dragenter 이벤트
dragover
드래그된 요소가 드롭 대상 범위 내로 이동하면 dragover 이벤트가 계속 발생합니다.
dragleave
요소가 드래그 아웃된 경우 드롭 대상이 배치된 경우 드래그 리브 이벤트 트리거
drop
요소가 드롭 대상에 배치되면 드롭 이벤트를 트리거합니다.
[참고] Firefox 드롭 이벤트의 기본 동작은 드롭 대상에 있는 URL을 여는 것입니다. Firefox가 정상적인 드래그 앤 드롭을 지원하려면 드롭 이벤트의 기본 동작을 취소해야 합니다
기본적으로 대상 요소의 배치가 허용되지 않으므로 드롭 이벤트가 발생하지 않습니다. . dragover 및 dragenter 이벤트에서 기본 동작이 차단되는 한 이는 허용된 드롭 대상이 되어 드롭 이벤트가 발생하도록 허용할 수 있습니다. 이 시점에서 커서는
<div id="test" draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div>
<div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目标</div>
<script>
var timer,i=0;
var timer1,i1=0;
//兼容IE8-浏览器
test.onmousedown = function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(){
this.style.backgroundColor = 'lightgreen';
this.innerHTML = '开始拖动';
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = '元素已被拖动' + ++i + '秒';
},1000);
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;i =0;
this.innerHTML = '结束拖动';
this.style.backgroundColor = 'pink';
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = '有元素进入目标区域';
this.style.background = 'red';
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
if(timer1) return;
timer1 = setInterval(function(){
target.innerHTML = '元素已进入' + (++i1) + '秒';
},1000);
}
target.ondragleave = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = '元素已离开目标区域';
this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = '元素已落在目标区域';
this.style.backgroundColor = 'orange';
}
</script>
dataTransfer 객체
배치를 허용하는 기호로 변경됩니다. 드래그 앤 드롭 작업에서는 이벤트 객체의 속성이며 드래그된 요소에서 드롭 대상으로 문자열 형식의 데이터를 전송하는 데 사용되는 dataTransfer 객체가 도입됩니다.
dataTransfer 객체에는 두 가지가 있습니다. 주요 메소드: getData() 및 setData()
getData()는 setData()가 저장한 값을 가져올 수 있습니다. getData() 메서드의 유일한 매개변수이기도 한 setData() 메서드의 첫 번째 매개변수는 저장된 데이터 유형을 나타내는 문자열이며, 값은 "text" 또는 "URL"
IE는 "텍스트"와 "URL"이라는 두 가지 유효한 데이터 유형만 정의하는 반면, HTML5는 이를 확장하여 다양한 MIME 유형을 지정할 수 있습니다. 이전 버전과의 호환성을 고려하여 HTML5는 "text"와 "URL"도 지원하지만 이 두 유형은 "text/plain"과 "text/uri-list"
에 매핑됩니다. dataTransfer 객체는 각 MIME 유형에 대한 값을 저장할 수 있습니다. 즉, 이 객체에 텍스트 조각과 URL을 동시에 저장하면 문제가 없을 것입니다
[참고] dataTransfer 객체에 저장된 데이터는 드롭에서만 읽을 수 있습니다. 이벤트 핸들러
텍스트 상자의 텍스트를 드래그하면 브라우저는 setData() 메서드를 호출하여 드래그된 텍스트를 dataTransfer 개체에 "텍스트" 형식으로 저장합니다. 마찬가지로 링크나 이미지를 드래그 앤 드롭하면 setData() 메서드가 호출되고 URL이 저장됩니다. 그런 다음 이러한 요소를 드롭 대상으로 드래그 앤 드롭하면 getData()
<div>请将从这堆内容不同乱七八糟的文字中挑选一些移动到拖放目标中</div>
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = '有元素进入目标区域';
this.style.background = 'red';
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
target.ondragleave = function(e){
e = e || event;
this.innerHTML = '元素已离开目标区域';
this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text');
this.innerHTML = '元素已落在目标区域';
this.style.backgroundColor = 'orange';
}
</script>
를 통해 데이터를 읽을 수 있습니다. 물론 처리할 수도 있습니다. dragstart 이벤트에서 프로그램의 setData()를 호출하여 나중에 사용하기 위해 전송하려는 데이터를 수동으로 저장하세요
<div id="test" draggable="true" data-value="这是一个秘密" style="height:30px;width:100px;background:pink;">拖动源</div>
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown = function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(e){
e = e || event;
e.dataTransfer.setData('text',test.getAttribute('data-value'));
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = '有元素进入目标区域';
this.style.background = 'red';
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
target.ondragleave = function(e){
e = e || event;
this.innerHTML = '元素已离开目标区域';
this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text');
this.innerHTML = '元素已落在目标区域';
this.style.backgroundColor = 'orange';
}
</script>
改变光标
利用dataTransfer对象，不仅可以传输数据，还能通过它来确定被拖动的元素以及作为放罝目标的元素能够接收什么操作。为此，需要访问dataTransfer对象的两个属性：dropEffect和effectAllowed
实际上，这两个属性并没有什么用，只是拖动源在拖动目标上移动时，改变不同的光标而已(但是，有一种情况除外)
dropEffect
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值
"none":不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值(此时，将无法触发drop事件)
"move":应该把拖动的元素移动到放置目标
"copy":应该把拖动的元素复制到放置目标
"link":表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL)
在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号
[注意]必须在ondragover事件处理程序中针对放置目标来设置dropEffect属性
effectAllowed
dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动元素的哪种dropEffect
effectAllowed属性可能的值如下
"uninitialized":没有给被拖动的元素设置任何放置行为
"none":被拖动的元素不能有任何行为
"copy":只允许值为"copy"的dropEffect
"link"只允许值为"link"的dropEffect
"move":只允许值为"move"的dropEffect
"copyLink":允许值为"copy"和"link"的dropEffect
"copyMove":允许值为"copy"和"move"的dropEffect
"linkMove":允许值为"link"和"move"的dropEffect
"all":允许任意dropEffect
[注意]必须在ondragstart事件处理程序中设置effectAllowed属性<div id="test" draggable="true" style="height:30px;width:100px;background:pink;display:inline-block;">拖放源</div>
<br>
<div id="target1" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(none)拖放目标</div>
<div id="target2" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(move)拖放目标</div>
<div id="target3" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(copy)拖放目标</div>
<div id="target4" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(link)拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown =function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(e){
e = e || event;
//兼容firefox浏览器
e.dataTransfer.setData('text','');
e.dataTransfer.effectAllowed = 'all';
}
target1.ondragenter = target2.ondragenter =target3.ondragenter =target4.ondragenter =function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}this.style.background = 'red';
}
target1.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = 'none';
}
target2.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = 'move';
}
target3.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = 'copy';
}
target4.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = 'link';
}
target1.ondragleave = target2.ondragleave =target3.ondragleave =target4.ondragleave =function(e){
e = e || event; this.style.backgroundColor = 'lightblue';
}
target1.ondrop = target2.ondrop =target3.ondrop =target4.ondrop =function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.style.backgroundColor = 'orange';
}
</script>
위는 에디터가 소개한 자바스크립트 네이티브 드래그 앤 드롭입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간에 맞춰 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
JavaScript 네이티브 드래그 앤 드롭에 대한 더 깊은 이해를 원하시면 PHP 중국어 웹사이트의 관련 기사를 주목해주세요!