Home > Article > Web Front-end > Detailed introduction to the sample code of drag and drop in html5

Detailed introduction to the sample code of drag and drop in html5

黄舟Original: 2017-03-15 15:42:471463browse

1)Create source project

1.1)The value of draggableattribute:

true— —This element can be dragged;

false—This element cannot be dragged;

auto—The browser can decide independently Whether an element can be dragged;

1.2) Event of the dragged element:

## dragstart— — Triggered when the element starts to be dragged;

drag——Triggered repeatedly when the element is dragged;

drag end——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 enters the screen space occupied by the release area; Triggered by movement when triggered in 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 DataTransfer

object

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

Additional attributes defined by the DragEvent object:

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

3.2)

Properties defined by the DataTransfer object:

types - the format of the returned data;

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

setData(0313a12b65aa20a048ec62b8cf470fd2,

clearData(0313a12b65aa20a048ec62b8cf470fd2)——Remove the 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>

The above is the detailed content of Detailed introduction to the sample code of drag and drop in html5. 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 sample code to open local app applicationNext article：HTML5 sample code to open local app application

See more

Detailed introduction to the sample code of drag and drop in html5

Related articles