Home > Article > Web Front-end > HTML5 drag-and-drop learning and complete example code

HTML5 drag-and-drop learning and complete example code

PHPzOriginal: 2017-04-23 11:55:061321browse

This article learns how to drag and drop HTML5 and complete the example code. I hope it will be helpful to H5 beginners!

1) Create the source project

1.1) The value of the draggable attribute:

true——this element Can be dragged;

false - this element cannot be dragged;

auto - the browser can independently determine an element Whether it can be dragged;

1.2) Events of dragged elements:

dragstart - triggered when the element starts to be dragged ；

drag——Triggered repeatedly when the element is dragged.

dragend——triggered when the drag operation is completed;

2) Create a release area

2.1) Release area event:

dragenter - triggered when the dragged element enters the screen space occupied by the release area;

Dragover——Triggered when the dragged element moves within the release area;

dragleave——Triggered when the dragged element leaves the release area without being placed;

Drop——Triggered when the dragged element is dropped in the release area.

<!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) Use the DataTransfer object

3.1) Dispatched at the same time as the event triggered by the drag-and-drop operation The object is DragEvent, which is derived from MouseEvent.

Additional attributes defined by the DragEvent object:

dataTransfer——Returns the object used for data transfer to the release area (DataTransfer);

3.2) Properties defined by the DataTransfer object:

types - the format of the returned data.

getData(0313a12b65aa20a048ec62b8cf470fd2)——Returns data in the specified format;

setData(0313a12b65aa20a048ec62b8cf470fd2,1d029f6197b5a3eb8a3fdf0a088ddf55 )——Set the data in the specified format.

clearData(0313a12b65aa20a048ec62b8cf470fd2)——Remove data in the specified format.

files - Returns the list of dragged 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) Drag and drop files:

Properties defined by File object

name——Get the file name.

type——Get the file type. Represented by MIME type;

size——Get the file size (calculated in bytes);

<!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>

Relevant html5 course recommendations: php Chinese website html5 video online tutorial

The above is the detailed content of HTML5 drag-and-drop learning and complete example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 Canvas drawing example tutorialNext article：HTML5 Canvas drawing example tutorial

See more

HTML5 drag-and-drop learning and complete example code

Related articles