html5를 사용하여 간단한 드래그 기능 구현-H5 튜토리얼-php.cn

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

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

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

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

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

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

3 . Case 구현 코드 :

(1) HTML 코드 세그먼트:

로그인 후 복사

(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 ) 드래그 앤 드롭 전:

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