javascript_html5 튜토리얼 기술을 사용하지 않고 HTML5에서 드래그 앤 드롭 효과 구현-H5 튜토리얼-php.cn

javascript_html5 튜토리얼 기술을 사용하지 않고 HTML5에서 드래그 앤 드롭 효과 구현

WBOY

풀어 주다： 2016-05-16 15:50:37

원래의

1232명이 탐색했습니다.

웹 개발에서 드래그 앤 드롭 효과를 얻으려면 Javascript를 사용해야 합니다. 오늘은 HTML5를 사용하여 구현해 보겠습니다.
먼저 HTML 핵심 코드를 살펴보세요:

코드 복사

코드는 다음과 같습니다.

작은 노란색 사각형을 큰 빨간색 상자로 드래그하세요

/div>

HTML5에는 draggable 속성이 새로 추가되었습니다. true, false, auto의 세 가지 값이 있습니다. True는 드래그 가능함을 의미하고, Auto는 불가능함을 의미합니다. 자세한 내용은 공식 문서를 참조하세요.

스타일 추가
:

코드 복사코드는 다음과 같습니다.

그럼 javascript를 살펴보겠습니다
:

코드 복사

코드는 다음과 같습니다.

function listeningEvent(eventTarget, eventType, eventHandler ) { if (eventTarget .addEventListener) { eventTarget.addEventListener(eventType, eventHandler,false);

} else if (eventTarget.attachEvent) {

eventType = "on" eventType; >eventTarget.attachEvent(eventType, eventHandler );

} else {
eventTarget["on" eventType] = eventHandler
}
}// 이벤트 취소
function cancelEvent( 이벤트) {
if ( event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false; 전파 취소
function cancelPropagation (event) {
if (event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true; 🎜>}
window.onload=function() {
var target = document.getElementById("drop")
listenEvent(target,"dragenter",cancelEvent)
listenEvent, "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") ;
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || 창 .event.dataTransfer. effectAllowed = 'copy';
evt.dataTransfer.setData("Text",item.id)
}); (evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
}

위 코드에서 HTML5에서 제공하는 드래그 앤 드롭 이벤트 집합을 사용하는 것을 볼 수 있습니다.
dragstart
드래그 이벤트를 직접 살펴보겠습니다.
드래그
드래그 작업 중
dragenter
드래그는 대상이 드롭을 허용하는지 결정하는 데 사용됩니다.
drop
Drop이 발생합니다.
dragleave
Drag가 대상을 벗어납니다.
dragend
Drag 작업이 종료됩니다.
위의 J는 이해하기 어렵지 않습니다.
직접 시도해 볼 수 있습니다. Opera는 현재 최고의 지원을 제공하지만 IE는 잘 작동하지 않습니다.
귀하의 웹 개발에 도움이 되기를 바랍니다