HTML5 드래그 앤 드롭

정의:

드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다.

HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 드래그 앤 드롭할 수 있습니다.

1. "드래그 앤 드롭 이벤트"에 대해 이야기해 보세요.

드래그 앤 드롭 이벤트, 즉 개체를 잡고 드래그하는 것입니다. 다른 위치로

일부 이벤트는 드래그 앤 드롭되는 요소에서 트리거되고 일부 이벤트는 드롭 대상에서 트리거됩니다. 요소가 드래그되면 dragstart 이벤트, drag 이벤트 및 dragend 이벤트가 순차적으로 트리거됩니다. 요소가 유효한 드롭 대상으로 드래그되면 dragenter 이벤트, dragover 이벤트, dragleave 또는 drop 이벤트가 순차적으로 트리거됩니다.

2. 구현 과정

요소를 드래그 가능으로 설정

<img draggable="true "> ;

무엇을 드래그할까요? 요소를 드래그하면 이벤트가 발생합니다(ondragstart 및 setData())

ondragstart 속성은 함수를 호출하고, drag(event)는 드래그된 데이터를 보도록 지정하고, dataTransfer.setData()는 드래그 앤 드롭을 설정합니다. 데이터 데이터의 유형과 값.

함수 드래그(ev){

ev.dataTransfer.setData("Text",ev.target.id);

}

어디에 놓을까요? ondragover 이벤트는 드래그된 데이터를 배치할 위치를 지정합니다.
기본적으로 데이터/요소는 다른 요소에 배치될 수 없습니다. 배치를 허용하려면 요소의 기본 처리를 방지해야 합니다. 따라서 ondrop은 ondragover 이벤트

event.preventDefault()

의 event.preventDefault() 메소드를 통해 배치해야 합니다. 먼저 PreventDefault()를 호출합니다. 브라우저의 기본 데이터 처리를 방지하려면 dataTransfer.getData("Text") 메소드를 통해 드래그된 데이터를 얻으십시오. 마지막으로 드래그된 요소는 배치된 요소에 추가됩니다.

함수 삭제(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

각 속성의 드래그 앤 드롭 수명주기

방금 ondragstart와 같은 몇 가지 새로운 속성 용어를 보았습니다. 아직 낯설고 왜인지는 모르겠지만 아래 표를 보면 이해가 될 것입니다.

드래그 라이프 사이클 속성 값 설명

드래그 시작 ondragstart 스크립트 in 드래그 작업이 시작될 때 스크립트 실행(오브젝트는 드래그된 요소입니다)

드래그 프로세스 중 ondrag 스크립트 스크립트가 드래그되는 동안 스크립트가 허용됩니다(오브젝트는 드래그된 요소입니다). 드래그된 요소)

드래그 프로세스 중 ondragenter 스크립트 요소가 적합한 배치 대상으로 드래그되면 스크립트를 실행합니다(오브젝트가 대상 요소임)

드래그 프로세스 중 ondragover 스크립트 요소가 올바른 배치 대상에 드래그되는 한 스크립트를 실행합니다(객체가 대상 요소입니다)

드래그 프로세스 중 ondragleave 스크립트 요소가 올바른 배치 대상을 벗어날 때(객체가 대상입니다) 요소)

드래그 종료 시 드롭 스크립트가 드래그됩니다. 드래그된 요소가 대상 요소에 배치될 때 스크립트를 실행합니다. (오브젝트가 대상 요소입니다.)

드래그 종료 Ondragend 스크립트 다음 경우에 스크립트를 실행합니다. 드래그 작업이 종료됩니다(객체는 드래그된 요소입니다)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
         #divDrag{width:200px;height:20px;margin:10px;border:2px solid #111;}
         #divArea{width:300px;margin:10px 0;height:300px;border:2px solid #ddd;}
         #divTips{width:300px;background-color:#eee;}
    </style>
    <script type="text/javascript">
         function getThisId(id){ return document.getElementById(id);}
            var EventUtil={
          addHandler:function(element,type,handler){
          if(element.addEventListener){element.addEventListener(type,handler,false);}
         else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
          },
          removeHandler:function(element,type,handler){
          if(element.removeEventListener){element.removeEventListener(type,handler,false);}
         else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
           },
            getEvent:function(event){
             return event? event:window.event;  /*获取事件对象*/
            },
            getTarget:function(event){
             return event.target||event.srcElement;  /*获取目标元素*/
            },
            preventDefault:function(event){      /*取消事件的默认设置*/
             if(event.preventDefault){
            event.preventDefault();
             }else{
            event.returnValue=false;
             }
            },
            stopPropagation:function(event){     /*取消事件冒泡*/
             if(event.stopPropagation){
            event.stopPropagation();
             }else{
            event.cancelBubble=true;
             }
            }
              };
            window.onload = function(){
            var Drag = getThisId("divDrag");
            var Area = getThisId("divArea");
            var objImg = document.createElement("img");
            objImg.src = "l.jpg"
            EventUtil.addHandler(Drag,"dragstart",function(e){
            var objDtf = e.dataTransfer;
            objDtf.setData("text",EventUtil.getTarget(e).id);
            objDtf.setDragImage(objImg,0,0);
            });
            EventUtil.addHandler(Area,"dragover",function(e){
            EventUtil.preventDefault(e);
            EventUtil.stopPropagation(e);
            });
            EventUtil.addHandler(Area,"drop",function(e){
            EventUtil.preventDefault(e);
            EventUtil.stopPropagation(e);
            var objDtf = e.dataTransfer;
            var strHTML = objDtf.getData("text");
            var replacediv=getThisId(strHTML).cloneNode(false);
            EventUtil.getTarget(e).appendChild(replacediv);
            });
            }
            document.ondragover = function(e){
            e.preventDefault();
            }
            document.ondrop = function(e){
            e.preventDefault();
            }
    </script>
</head>
<body>
<div id="divFrame">
    <div class="wPub" id="dddd">
        <img id="divDrag" draggable="true" src="http://e.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec2eece15e61d0f703908fc1bd.jpg">
    </div>
      <div id="divArea"></div>
</div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽</title> <style type="text/css"> .div{ float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script type="text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="80" height="30"> </div> <div id="div2" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>

제출하다 코드 재설정

자동운전