欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

html5之拖放的学习和完整实例代码

程序员文章站 2022-04-14 14:45:40
...

本文学习html5的拖放并完整实例代码,希望对H5初学者有帮助!

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>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = 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>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = 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">
            <p class="table">
                <p class="row">
                    <p class="cell label">Bananas:</p>
                    <p class="cell"><input name="bananas" value="2"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Apples:</p>
                    <p class="cell"><input name="apples" value="5"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Cherries:</p>
                    <p class="cell"><input name="cherries" value="20"/></p>
                </p>
                <p class="row">
                    <p class="cell label">File:</p>
                    <p class="cell"><input type="file" name="file"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Total:</p>
                    <p id="results" class="cell">0 items</p>
                </p>                
            </p>
            <p id="target">
                <p id="msg">Drop Files Here</p>
            </p>            
            <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 = new FormData(form);
                 
                if (fileList || true) {
                    for (var i = 0; i < fileList.length; i++) {
                        formData.append("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 = JSON.parse(httpRequest.responseText);
                    document.getElementById("results").innerHTML = "You ordered "
                        + data.total + " items";
                }
            }
         </script>
    </body>
</html>

相关html5课程推荐:html5视频在线教程

以上就是html5之拖放的学习和完整实例代码的详细内容,更多请关注其它相关文章!