HTML5 실제 전투 및 네이티브 드래그 분석(4개의 드래그 가능한 속성 및 기타 멤버)

드래그 가능한 속성

을 소개했습니다. 이전에 HTML5의 기본 드래그 앤 드롭에 대한 몇 가지 관련 지식이 있습니다. 오늘은 HTML5 드래그 앤 드롭의 또 다른 작은 것들을 소개하겠습니다. 더 이상 고민하지 말고 함께 살펴보겠습니다.

기본적으로 링크, 텍스트, 이미지는 드래그가 가능하며, 코드를 작성하지 않고도 드래그할 수 있습니다. 다른 요소 태그를 드래그할 수 있게 하려면 HTML5만 가능합니다. HTML5는 모든 HTML 요소에 대해 요소를 끌 수 있는지 여부를 나타내는 dragable 속성을 지정합니다. 링크 및 이미지 태그에서는 dragable 속성이 자동으로 true로 설정되며, 다른 요소의 dragable 속성은 기본값이 false입니다.

dragable 속성을 지원하는 브라우저는 Firefox 4+, Chrome, IE 10+ 및 Safari 5+입니다. Opera 11.5 및 이전 버전은 HTML5 드래그 앤 드롭 기능을 지원하지 않습니다. 또한 Firefox에서 드래그 가능한 속성을 지원하려면 ondragstart 이벤트 핸들러를 추가하고 dataTransfer 객체에 일부 정보를 저장해야 합니다. IE 9 이하에서는 mousedown 이벤트 핸들러를 통해 dragDrop() 메서드를 호출하면 모든 요소를 ​​드래그할 수 있게 되었습니다. Safari 4 및 이전 버전에서는 해당 요소 -khtml-user-drag에 대해 CSS 스타일을 추가로 설정해야 합니다. 요소를 드래그할 수 있습니다.

HTML5 다른 멤버 끌기

이전에 dataTransfer 개체의 일부 속성을 소개했지만 포괄적이지 않습니다. 아래의 일부 메서드와 속성은 누락되었을 수 있습니다.

　addElement(element): 드래그 작업을 위한 요소를 추가합니다. 이 요소를 추가하면 데이터(즉, 드래그 소스 역할을 하고 콜백에 응답하는 개체 추가)에만 영향을 미치며 드래그 작업 중 페이지 요소의 모양에는 영향을 주지 않습니다. 이 블로그를 작성하는 시점에서는 Firefox 3.5+에서만 이 방법을 구현합니다.

ClearData(format): 특정 형식으로 저장된 데이터를 지웁니다. 이 방법을 구현하는 브라우저에는 Firefox 3.5+, Safari 4+, IE 및 Safari 4+가 포함됩니다.

SetDragImge(element, x, y): 드래그가 발생할 때 커서 아래에 표시될 이미지를 지정합니다. 이 메서드는 표시할 HTML 요소와 이미지에 있는 커서의 x 및 y 좌표라는 세 가지 매개 변수를 받습니다. 그 중 HTML 요소는 이미지일 수도 있고, 기타 요소일 수도 있습니다. 이미지인 경우 이미지가 표시되며, 다른 요소인 경우 렌더링된 요소가 표시됩니다. 지원되는 브라우저는 Safari 4+, Chrome 및 Firefox 3.5+입니다.

유형: 현재 저장된 데이터 유형입니다. 이는 "텍스트"와 같은 문자열 형식으로 데이터 유형을 저장하는 배열과 유사한 컬렉션입니다. 지원되는 브라우저는 Chrome, Firefox 3.5+, IE 10+입니다.

이제 이론적 지식을 배웠으니 좀 더 깊은 이해를 돕기 위해 작은 예를 들어 보겠습니다.

　드래그 가능한 속성 및 기타 멤버의 작은 예

　HTML 코드

아아앙

　CSS 코드

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="false">c</li>
</ul>
<a href="http://www.baidu.com/">d</a>
<p id="p1"></p>

　JavaScript 코드

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

바탕 화면을 다음으로 드래그하세요.

　HTML 코드

//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;;
			
		
		};
		
		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;) );
		alert( ev.dataTransfer.types );
	
	};
	
};

　의 페이지 작은 예 CSS 코드

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的

window.onload = function(){

	var op = document.getElementById('p1');
	
	
	
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = 'green';
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = 'red';
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		ev.dataTransfer.dropEffect = 'link';  //真对外部文件
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		ev.preventDefault();  //阻止默认行为
	
		this.style.background = 'red';	
		
		var oFR = new FileReader();
	
		var list = ev.dataTransfer.files;  //当前拖拽的那个文件(返回的一个文件列表)
		
		//alert(list.length);
		
		//type : 文件类型
		
		//alert(list[0].type);
		
		
		oFR.onload = function(){ //读取完成，触发事件
			
			alert(this.result);  // 读取到的信息
			
		};
		
		oFR.readAsDataURL(list[0]);
	
	};
	
};

　JavaScript 코드

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

휴지통 삭제 예시

　HTML코드

<p id="p1">梦龙小站</p>

CSS 코드

안돼

　JavaScript 코드

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="true">c</li>
</ul>
<p id="p1">垃圾箱</p>

HTML5 실제 전투 및 네이티브 드래그 분석(드래그 가능 속성 4개 및 기타 멤버)을 소개합니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!