首页 > 代码库 > html5之拖放

html5之拖放

1)创建来源项目

  1.1)draggable属性的值:

      true——此元素能被拖动;

      false——此元素不能被拖动;

      auto——浏览器能够自主决定某个元素能否被拖动;

  1.2)被拖动元素的事件:

      dragstart——在元素開始被拖动时触发;

      drag——在元素被拖动时重复触发。

      dragend——在拖动操作完毕时触发;

2)创建释放区

   2.1)释放区事件:

        dragenter——当被拖动元素进入释放区所占领的屏幕空间时触发;

        dragover——当被拖动元素在释放区内触发时移动触发;

        dragleave——当被拖动元素没有放入就离开释放区时触发;

        drop——当被拖动元素在释放区放下时触发。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <div id="src">
            <img draggable="true" id="banana" src="http://www.mamicode.com/banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="http://www.mamicode.com/apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="http://www.mamicode.com/cherries100.png" alt="cherry"/>
            <div id="target">
                <p id="msg">Drop Here</p>
            </div>            
        </div>            
    
        <script>
            var src = http://www.mamicode.com/document.getElementById("src");
            var target = document.getElementById("target");
            var msg = document.getElementById("msg");
          
            var draggedID;
          
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var newElem = document.getElementById(draggedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                draggedID = e.target.id;
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>
3)使用DataTransfer对象

  3.1)与拖放操作所触发的事件同一时候派发的对象是DragEvent,它派生于MouseEvent。

  DragEvent对象定义的额外属性:

  dataTransfer——返回用于数据传输到释放区的对象(DataTransfer);

  3.2)DataTransfer对象定义的属性:

  types——返回数据的格式。

  getData(<format>)——返回指定格式的数据;

  setData(<format>,<data>)——设置指定格式的数据。

  clearData(<format>)——移除指定格式的数据。

  files——返回已被拖动文件的列表。  

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <div id="src">
            <img draggable="true" id="banana" src="http://www.mamicode.com/banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="http://www.mamicode.com/apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="http://www.mamicode.com/cherries100.png" alt="cherry"/>
            <div id="target">
                <p id="msg">Drop Here</p>
            </div>            
        </div>            
    
        <script>
            var src = http://www.mamicode.com/document.getElementById("src");
            var target = document.getElementById("target");
                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var droppedID = e.dataTransfer.getData("Text");               
                var newElem = document.getElementById(droppedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                e.dataTransfer.setData("Text", e.target.id);
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>
    3.3)拖放文件:

    File对象定义的属性

    name——获取文件名称。

    type——获取文件类型。以MIME类型表示;

    size——获取文件大小(以字节计算);

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            .table {display:table;}
            .row {display:table-row;}
            .cell {display: table-cell; padding: 5px;}
            .label {text-align: right;}
            #target {border: medium double black; margin:4px; height: 50px;
                width: 200px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
        </style>
    </head>
    <body>
        <form id="fruitform" method="post" action="http://titan:8080/form">
            <div class="table">
                <div class="row">
                    <div class="cell label">Bananas:</div>
                    <div class="cell"><input name="bananas" value="http://www.mamicode.com/2"/></div>
                </div>
                <div class="row">
                    <div class="cell label">Apples:</div>
                    <div class="cell"><input name="apples" value="http://www.mamicode.com/5"/></div>
                </div>
                <div class="row">
                    <div class="cell label">Cherries:</div>
                    <div class="cell"><input name="cherries" value="http://www.mamicode.com/20"/></div>
                </div>
                <div class="row">
                    <div class="cell label">File:</div>
                    <div class="cell"><input type="file" name="file"/></div>
                </div>
                <div class="row">
                    <div class="cell label">Total:</div>
                    <div id="results" class="cell">0 items</div>
                </div>                
            </div>
            <div id="target">
                <p id="msg">Drop Files Here</p>
            </div>            
            <button id="submit" type="submit">Submit Form</button>
        </form>
        <script>
            var target = document.getElementById("target");     
            var httpRequest;
            var fileList;
                         
            document.getElementById("submit").onclick = handleButtonPress;                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                fileList = e.dataTransfer.files;
                e.preventDefault();
            }          
                         
            function handleButtonPress(e) {
                e.preventDefault();
                 
                var form = document.getElementById("fruitform");
                var formData = http://www.mamicode.com/new FormData(form);"file" + i, fileList[i]);
                    }
                }  
                 
                httpRequest = new XMLHttpRequest();
                httpRequest.onreadystatechange = handleResponse;
                httpRequest.open("POST", form.action);
                httpRequest.send(formData);
            }
                         
            function handleResponse() {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    var data = http://www.mamicode.com/JSON.parse(httpRequest.responseText);"results").innerHTML = "You ordered "
                        + data.total + " items";
                }
            }
         </script>
    </body>
</html>

html5之拖放