HTML5 실제 전투 및 기본 드래그 분석(2개의 드래그 이벤트 dragstart, drag 및 dragend)

드래그 이벤트

드래그 이벤트를 통해 드래그를 여러 가지 제어할 수 있습니다. 드래그 이벤트가 발생하는 요소나 위치가 가장 중요합니다. 일부 이벤트는 드래그된 요소에서 시작되고 일부 이벤트는 드롭 대상에서 시작됩니다. 요소를 드래그할 때 트리거되는 이벤트는 dragstart 이벤트, drag 이벤트 및 dragend 이벤트입니다.

마우스 버튼을 누르고 마우스를 움직이기 시작하면 드래그된 요소에서 dragstart 이벤트가 트리거됩니다. 이때 커서는 요소를 자체 문에 배치할 수 없음을 나타내는 "배치할 수 없음" 기호(원 안에 백슬래시가 있음)로 변경됩니다. 드래그가 시작되면 ondragstart 이벤트 핸들러를 통해 JavaScript 코드가 실행될 수 있습니다.

dragstart 이벤트가 트리거된 후 드래그 이벤트가 즉시 트리거되며 요소가 드래그되는 동안 드래그 이벤트가 계속 트리거됩니다. 이 이벤트는 mousemove 및 touchmove 이벤트와 유사합니다. 드래그가 중지되면(요소가 유효한 드롭 대상에 배치되었는지 또는 유효하지 않은 드롭 대상에 배치되었는지 여부) dragend 이벤트가 발생합니다.

위에서 언급한 세 가지 이벤트의 대상은 모두 드래그된 요소에 의해 실행됩니다. 기본적으로 브라우저는 드래그하는 동안 드래그된 요소의 모양을 변경하지 않습니다. 하지만 직접 수정할 수 있습니다. 그러나 대부분의 브라우저는 드래그되는 요소의 반투명 복사본을 생성하며 항상 커서를 따릅니다. 요소가 유효한 드롭 대상으로 드래그되면 트리거되는 이벤트는 dragenter 이벤트, dragover 이벤트 및 dragleave 또는 drop 이벤트입니다.

요소를 드롭 대상으로 드래그하는 동안 dragenter 이벤트(마우스 오버 이벤트와 유사)가 트리거됩니다. 그 다음에는 드래그오버 이벤트가 발생하며, 드래그된 요소가 드롭 대상 범위 내에서 여전히 이동 중인 경우 드래그오버 이벤트가 계속 트리거됩니다. 요소를 드롭 대상 밖으로 드래그하면 dragover 이벤트가 더 이상 발생하지 않지만 dragleave 이벤트가 트리거됩니다(mouseout 이벤트와 유사). 요소가 드롭 대상에 배치되면 드래그리브 이벤트 대신 드롭 이벤트가 트리거됩니다. dragenter 이벤트, dragover 이벤트, dragleave 또는 drop 이벤트의 대상은 모두 드롭 대상 역할을 하는 요소입니다.

사용자 정의 배치 대상

유효하지 않은 배치 대상을 지나 요소를 드래그하면 해당 요소를 배치할 수 없음을 나타내는 특별한 마우스 동작(원 안에 백슬래시)이 표시됩니다. 모든 요소가 드롭 대상 이벤트를 지원하지만 이러한 요소는 기본적으로 드롭이 허용되지 않습니다. 드롭이 허용되지 않는 요소를 지나 드래그하는 경우 사용자가 무엇을 하든 드롭 이벤트가 발생하지 않습니다. 그러나 dragenter 및 dragover 이벤트의 기본 동작을 재정의하여 모든 요소를 ​​유효한 놓기 대상으로 만들 수 있습니다.

기본 동작을 재정의한 후 요소를 놓기 대상으로 드래그하면 커서가 배치를 허용하는 기호로 변경됩니다. Firefox 3.5+에서 드롭 이벤트의 기본 동작은 드롭 대상에 드롭된 URL을 여는 것입니다. 이미지를 놓기 대상으로 드래그하면 페이지가 이미지 파일로 리디렉션됩니다. 드롭 대상에 텍스트를 드래그 앤 드롭하면 잘못된 URL 오류가 발생합니다. 따라서 Firefox가 일반적인 드래그 앤 드롭을 지원하려면 드롭 이벤트의 기본 동작을 취소하고 드래그된 요소의 URL이 열리지 않도록 해야 합니다. 작은 예는 다음과 같습니다

　HTML 코드

<!-- 拖拽”梦龙小站”到”梦龙”地方的小例子 -->
<ul>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
</ul>
<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 코드

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var op = document.getElementById('p1');
	var iNow = 0;
	
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].ondragstart = function(){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
		
		/*aLi[i].ondrag = function(){ //开始与结束之间，连续触发
			
			document.title = iNow++;
			
		};*/
	}
	
	op.ondragenter = function(){  //相当于onmouseover

		this.style.background = &#39;green&#39;;
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = &#39;red&#39;;
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		document.title = iNow++;
		
	};

	op.ondrop = function(ev){  //释放鼠标的时候触发

		
	
		this.style.background = &#39;red&#39;;	
	
		alert("梦龙小站，鼠标已经释放");

		ev.preventDefault();  //阻止默认事件：防止打开拖拽元素的url
	
	};
	
};

위 내용은 내용입니다. 더 많은 관련 내용을 확인하세요. PHP 중국어 홈페이지(www.php.cn)를 팔로우하세요!