html5를 사용하여 간단한 드래그 기능 구현

구체적인 방법은 다음과 같습니다.

1. 개체 요소의 draggable 속성을 true(draggable="true")로 설정합니다. 또한 a 요소와 img 요소는 href를 지정해야 합니다.

2. 드래그 앤 드롭과 관련된 이벤트 처리 코드 작성:

(학습 동영상 공유: html 동영상 튜토리얼)

3 . Case 구현 코드 :

(1) HTML 코드 세그먼트:

<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br />
<img  src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/ alt="html5를 사용하여 간단한 드래그 기능 구현" >

(2) CSS 코드 세그먼트:

#tuo{
	width: 540px;
	height: 320px;
	background: #e54d26;
}
#cun{
	width: 540px;
	height: 320px;
	border: 2px solid #d2d2d2;
	box-shadow: 1px 4px 8px #646464;
}
img{
	width: 500px;
	height: 280px;
}

(3) JavaScript 코드 세그먼트:

function allowDrop(ev){
	//不执行默认处理（拒绝被拖放）
	ev.preventDefault();
};
function drag(ev){
	//使用setData(数据类型，携带的数据)
	//方法将要拖放的数据存入dataTransfer对象
	ev.dataTransfer.setData("Text",ev.target.id);
};
function drop(ev){
	//不执行默认处理（拒绝被拖放）
	ev.preventDefault();
	//使用getData()获取到数据，然后赋值给data
	var data = ev.dataTransfer.getData("Text");
	//使用appendChild方法把拖动的节点放到元素节点中成为其子节点
	ev.target.appendChild(document.getElementById(data));
};

4. 달성된 효과는 다음과 같습니다.

(1 ) 드래그 앤 드롭 전:

(2) 드래그 앤 드롭 후

관련 추천: html5 튜토리얼

위 내용은 html5를 사용하여 간단한 드래그 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!