HTML5 드래그 앤 드롭

드래그 앤 드롭

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

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

1. HTML5 드래그 앤 드롭

드래그 앤 드롭(Drag and drop)은 HTML5 표준의 일부입니다.

2. 드래그 시작

ondragstart: 드래그된 데이터를 지정하는 드래그(이벤트) 함수가 호출됩니다

3. 드래그 데이터 설정

setData(): 드래그된 데이터의 데이터 유형과 값을 설정합니다.

4. 배치

ondragover: 이벤트는 드래그된 데이터를 배치할 위치를 지정합니다.

5. 배치

ondrop: 드래그 앤 드롭한 데이터를 배치하면 drop 이벤트가 발생합니다.

요약:

ondrop 이벤트가 드래그 대상(소스 요소)에서 트리거됨:

ondragstart: 사용자가 요소 드래그를 시작할 때 트리거됨
ondrag: 요소가 드래그될 때 트리거됨
ondragend: 사용자가 완료한 후 트리거됨 요소 드래그

대상이 해제될 때 트리거되는 이벤트

ondragenter: 마우스로 드래그한 객체가 해당 컨테이너의 범위에 들어갈 때 이 이벤트가 트리거됩니다.
ondragover: 드래그된 객체가 다른 객체 컨테이너에 있을 때 이 이벤트는 이벤트는 범위 내에서 드래그할 때 트리거됩니다.
ondragleave: 이 이벤트는 마우스로 드래그하는 객체가 해당 컨테이너의 범위를 벗어날 때 트리거됩니다.
ondrop: 이 이벤트는 드래그 프로세스 중에 마우스 버튼을 놓을 때 트리거됩니다.

드래그 앤 드롭 예시:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            float: left;
            background-color: #CCCCCC;
        }
        #box2{
            float: left;
            background-color: aqua;
        }
    </style>
    <script> var box1Div, msgDiv, img1, box2Dib;
    window.onload = function () {
        box1Div = document.getElementById("box1");
        msgDiv = document.getElementById("msg");
        img1 = document.getElementById("img1");
        box2Div = document.getElementById("box2");
        box1Div.ondragover = function (e) {
            e.preventDefault();
        }
        box2Div.ondragover = function (e) {
            e.preventDefault();
        }
        img1.ondragstart = function (e) {
            e.dataTransfer.setData("imgId","img1");
        }
        box1Div.ondrop = dropImghandler;
        box2Div.ondrop = dropImghandler;
        function dropImghandler(e) {
            //创建节点
 var img = document.getElementById(e.dataTransfer.getData("imgId"));
            e.target.appendChild(img);
        }
    }
    function showObj(obj) {
        var s = "";
        for(var k in obj){
            s+=k+":"+obj[k]+"<br/>";
        }
        msgDiv.innerHTML = s;
    }</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt="">
<div id="msg"></div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drop</title> <style> .box{ width: 400px; height: 400px; } #box1{ float: left; background-color: #CCCCCC; } #box2{ float: left; background-color: aqua; } </style> <script> var box1Div, msgDiv, img1, box2Dib; window.onload = function () { box1Div = document.getElementById("box1"); msgDiv = document.getElementById("msg"); img1 = document.getElementById("img1"); box2Div = document.getElementById("box2"); box1Div.ondragover = function (e) { e.preventDefault(); } box2Div.ondragover = function (e) { e.preventDefault(); } img1.ondragstart = function (e) { e.dataTransfer.setData("imgId","img1"); } box1Div.ondrop = dropImghandler; box2Div.ondrop = dropImghandler; function dropImghandler(e) { //创建节点 var img = document.getElementById(e.dataTransfer.getData("imgId")); e.target.appendChild(img); } } function showObj(obj) { var s = ""; for(var k in obj){ s+=k+":"+obj[k]+"<br/>"; } msgDiv.innerHTML = s; }</script> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt=""> <div id="msg"></div> </body> </html>

제출하다 코드 재설정

자동운전