HTML5 실제 전투 및 기본 드래그 앤 드롭 분석(dataTransfer 객체 3개)

HTML5 드래그 앤 드롭 데이터 전송

네이티브 드래그 앤 드롭은 dragstart, drag 및 dragend 이벤트를 통해 구현됩니다. 하지만 이것은 단지 드래그 앤 드롭일 뿐입니다. IE6과 IE7에는 여전히 드래그 앤 드롭 문제가 있으며 데이터 교환이 구현되지 않습니다. 데이터 교환을 실현하기 위해 IE5에서는 dataTransfer 개체를 도입했습니다. dataTransfer 객체는 드래그된 요소에서 드롭 대상으로 문자열 형식의 데이터를 전송하는 데 사용되는 이벤트 객체의 속성입니다. dataTransfer 객체는 이벤트 객체의 속성이기 때문에 드래그 앤 드롭 이벤트의 이벤트 핸들러 내에서만 액세스할 수 있습니다. 이벤트 핸들러에서 이 개체의 속성과 메서드를 사용하여 끌어서 놓기 기능을 완료할 수 있습니다.

dataTransfer 객체에는 getData() 메서드와 setData() 메서드라는 두 가지 주요 메서드가 있습니다. 이 두 가지 방법의 영어 문자적 의미를 통해 대략적으로 용도를 추측할 수 있습니다. getData() 메서드는 setData() 메서드에서 저장한 값을 가져올 수 있습니다. getData() 메소드의 유일한 매개변수이기도 한 setData() 메소드의 첫 번째 매개변수는 데이터 유형을 저장하는 데 사용되는 문자열이며 값은 "text" 또는 "URL"입니다.

IE는 "텍스트" 또는 "URL"이라는 두 가지 유효한 데이터 유형만 정의하는 반면, HTML5는 이를 확장하여 다양한 MIME 유형을 지정할 수 있습니다. 이전 버전과의 호환성을 위해 HTML5는 "text" 또는 "URL"도 지원하지만 이 두 유형은 "text/plain" 또는 "text/url-list"에 매핑됩니다.

실제로 dataTransfer 객체는 각 MIME 유형에 대한 값을 저장할 수 있습니다. 즉, 동료가 이 개체에 텍스트 조각과 URL을 저장하면 다른 문제가 발생하지 않습니다. 그러나 dataTransfer 객체에 저장된 데이터는 drop 이벤트 핸들러에서만 읽을 수 있습니다. ondrop 핸들러에서 데이터를 읽지 않으면 dataTransfer 객체가 삭제되고 데이터가 손실됩니다.

텍스트 상자의 텍스트를 드래그하면 브라우저는 setData() 메서드를 호출하고 드래그된 텍스트를 dataTransfer 개체에 "텍스트" 형식으로 저장합니다. 마찬가지로 링크나 이미지를 드래그 앤 드롭하면 setData() 메서드가 호출되고 URL이 저장됩니다. 그런 다음 이러한 요소를 드롭 대상으로 드래그 앤 드롭하면 getData() 메서드를 통해 데이터를 읽을 수 있습니다. 물론 개발자로서 나중에 사용하기 위해 dragstart 이벤트 핸들러에서 setData()를 호출하여 전송하려는 데이터를 수동으로 저장할 수도 있습니다.

데이터를 텍스트로 저장하는 것과 URL로 저장하는 것은 차이가 있습니다. 데이터를 텍스트 형식으로 저장하면 해당 데이터는 특별한 처리를 받지 않습니다. URL 형식으로 저장하면 브라우저는 이를 웹 페이지의 링크로 처리합니다. 이 URL을 다른 브라우저 창에 배치하면 해당 URL을 열 수 있습니다.

Firefox 5 이하 버전에서는 "url" 및 "text"를 "" 및 "text/plain"에 매핑할 수 없습니다. 그러나 "Text"(대문자 T)를 "text/plain"에 매핑할 수 있습니다. 크로스 브라우저 상황에서 dataTransfer 객체로부터 데이터를 더 잘 얻기 위해서는 URL 데이터를 얻을 때 두 개의 값을 감지하고, 텍스트 데이터를 얻을 때 "Text"를 사용하는 것이 가장 좋습니다.

IE10 및 이전 버전은 여전히 ​​확장 MIME 유형 이름을 지원하지 않으며 인식할 수 없는 데이터 유형이 발견되면 오류를 보고하므로 짧은 데이터 유형을 먼저 입력해야 합니다. 그러나 "text" 또는 "URL" 값은 IE에서만 필수입니다. Firefox 3.6+에서는 문자열을 다른 값으로 설정하면 Chrome 및 Opera도 정상적으로 실행될 수 있습니다.

　dropEffect 속성 및 effectAllowed 속성

dataTransfer 객체를 사용하면 데이터를 전송할 수 있을 뿐만 아니라 드래그된 요소와 배치 대상인 요소가 dataTransfer 객체를 통해 어떤 작업을 받을 수 있는지도 결정됩니다. 이러한 기능을 달성하기 위해 dropEffect 속성과 effectAllowed 속성이 사용됩니다.

dropEffect 속성

그 중 dropEffect 속성을 통해 드래그된 요소가 어떤 동작을 수행할 수 있는지 알 수 있습니다. 이 속성의 네 가지 값은 다음과 같습니다.

　none: 드래그한 요소를 여기에 배치할 수 없습니다. 이는 텍스트 상자를 제외한 모든 요소의 기본값입니다.

　이동: 드래그한 요소를 드롭 대상으로 이동해야 합니다.

　복사: 드래그한 요소를 드롭 대상에 복사해야 합니다.

　링크: 대상을 배치하면 드래그된 요소가 열립니다(단, 드래그된 요소는 URL 주소가 있는 링크여야 합니다).

요소를 드롭 대상으로 드래그할 때 위의 각 값에 따라 커서가 다른 기호로 표시됩니다.

effectAllowed 속성

dropEffect 속성만으로는 유용하지 않습니다. effectAllowed 속성과 함께 사용할 때만 효과적입니다. effectAllowed 속성은 요소 드래그의 어떤 동작이 허용되는지를 나타냅니다(dropEffect). effectAllowed 속성에도 많은 값이 있으며 해당 값은 다음과 같습니다.

　uninitialized: 드래그된 요소에 대해 배치 동작이 설정되지 않았습니다.

　없음: 드래그된 요소는 어떤 동작도 할 수 없습니다.

　copy: 값이 "copy"인 dropEffect만 허용됩니다.

　link: 값이 "link"인 dropEffect만 허용됩니다.

　move: 값이 "move"인 dropEffect만 허용됩니다.

　copyLink: "복사" 및 "링크" 값으로 dropEffect를 허용합니다.

　copyMove: "복사" 및 "이동" 값으로 dropEffect를 허용합니다.

　linkMove: "link" 및 "move" 값으로 dropEffect를 허용합니다.

　all: 모든 dropEffect를 허용합니다.

effectAllowed 속성을 설정하려면 ondragstart 이벤트 핸들러에서 설정해야 합니다. 작은 예는 다음과 같습니다

　HTML 코드

<ul>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
</ul>
<a href="http://www.baidu.com/">梦龙小站</a>
<p id="p1">梦龙小站</p>

　CSS 코드

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}

　JavaScript 코드

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
//拖动不带链接的li，会起作用但不跳转链接
//拖动带连接的a，会起作用也跳转

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var aA = document.getElementsByTagName('a');
	var op = document.getElementById('p1');
	
	for(var i=0;i<aLi.length;i++){
	
		aLi[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = &#39;all&#39;;
			
			ev.dataTransfer.setDragImage(this,0,0);
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
	}
	for(var i=0;i<aA.length;i++){
	
		aA[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = &#39;link&#39;;
			
			ev.dataTransfer.setDragImage(this,0,0);
		
		};
		
		aA[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
	}
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = &#39;green&#39;;
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = &#39;red&#39;;
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		ev.dataTransfer.dropEffect = &#39;link&#39;;  //真对外部文件
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		this.style.background = &#39;red&#39;;	
	
		alert( ev.dataTransfer.getData(&#39;a&#39;) );
	
	};
	
};

위는 실제 전투와 HTML5 기본 드래그 앤 드롭 분석(3개의 dataTransfer 개체) 관련 내용을 더 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!