댓글 : 네티즌은 항상 드래그 앤 드롭 효과를 달성하기 위해 JavaScript를 사용하지 않는지 확인하고 싶어했습니다. 오늘, HTML5는 다음에 자세한 소개를했습니다. 알아야 할 친구는 그것을 언급 할 수 있습니다.
웹 개발에서는 드래그 앤 드롭 효과를 달성하기 위해 JavaScript를 사용해야합니다. 오늘 HTML5를 사용하여 구현하겠습니다.
핵심 HTML 코드를 먼저 살펴 보겠습니다.
<div>
<p> 작은 노란색 사각형을 큰 빨간색 상자로 끌어냅니다 </p>
</div>
<div draggable = "true">
</div>
<div>
</div>
Draggable 속성은 HTML5에 의해 새로 추가됩니다. True, False, Auto의 세 가지 값이 있습니다. 참은 드래그하고, 거짓은 허용되지 않습니다. Auto는 사용자의 브라우저가 지원하는지 여부에 따라 다릅니다. 자세한 내용은 공식 문서를 참조하십시오.
작은 스타일 추가 :
<스타일 유형 = "텍스트/CSS">
#떨어지다
{
너비 : 300px;
높이 : 200px;
배경색 : #FF0000;
패딩 : 5px;
국경 : 2px Solid #000000;
}
#목
{
너비 : 100px;
높이 : 100px;
배경색 : #ffff00;
패딩 : 5px;
마진 : 20px;
국경 : 1px 점선 #000000;
}
*[draggable = true] {
-Moz-user 선택 : 없음;
-khtml-user-drag : 요소;
커서 : 이동;
}
*: -Khtml-drag {
배경색 : RGBA (238,238,238, 0.5);
}
</스타일>
그런 다음 JavaScript를 보자 :
함수 Listenevent (EventTarget, EventType, EventHandler) {
if (eventTarget.addeventListener) {
eventTarget.AdDeventListener (EventType, EventHandler, False);
} else if (eventTarget.attachevent) {
eventType = "on" + eventType;
EventTarget.attachevent (EventType, EventHandler);
} 또 다른 {
EventTarget [ "on" + EventType] = EventHandler;
}
}
// 이벤트를 취소합니다
함수 cancelEvent (이벤트) {
if (event.preventDefault) {
event.preventDefault ();
} 또 다른 {
event.returnvalue = false;
}
}
// 전파를 취소합니다
함수 cancelPropagation (이벤트) {
if (event.stopPropagation) {
event.stopPropagation ();
} 또 다른 {
event.cancelbubble = true;
}
}
Window.onload = function () {
var target = document.getElementById ( "drop");
Listenevent (Target, "Dragenter", CancelEvent);
Listenevent (target, "dragover", dragover);
Listenevent (target, "drop", function (evt) {
CANCELPROPAGATION (EVT);
EVT = EVT || Window.event;
evt.datatransfer.dropeffect = 'copy';
var id = evt.datatransfer.getData ( "text");
Target.appendChild (document.getElementById (id));
});
var item = document.getElementById ( "항목");
item.setattribute ( "draggable", "true");
Listenevent (항목, "dragstart", function (evt) {
EVT = EVT || Window.event;
evt.datatransfer.effectallowed = 'copy';
evt.datatransfer.setdata ( "text", item.id);
});
};
기능 드래그 오버 (EVT) {
if (evt.preventDefault) evt.preventDefault ();
EVT = EVT || Window.event;
evt.datatransfer.dropeffect = 'copy';
거짓을 반환합니다.
}
위의 코드에서 HTML5 세트를 사용하여 제공되는 드래그 앤 드롭 이벤트를 살펴보고 다음을 직접 살펴 봅니다.
드래그 스타트
드래그 이벤트가 시작됩니다.
견인
드래그 작업 중에.
Dragenter
드래그는 대상 위에 있습니다. 대상이 드롭을 받아 들일지 판단하는 데 사용됩니다.
드래그 오버
드래그는 대상이 끝났습니다. 사용자에게 피드백을 결정하는 데 사용됩니다.
떨어지다
드롭이 발생합니다.
드래그 리브
드래그 잎 대상.
드래그 엔드
드래그 작동이 끝납니다.
관련 이벤트를 정의하여 원하는 기능을 구현하십시오. 위의 JS는 이해하기 어렵지 않습니다.
직접 시도해 볼 수 있습니다. 현재는 오페라에서 최고를 지원하지만 IE 효과는 좋지 않습니다.
웹 개발에 도움이되기를 바랍니다.