Glisser-déposer HTML5

Glisser-déposer

Le glisser-déposer est une fonctionnalité courante qui vous permet de saisir un objet et de le faire glisser vers un autre emplacement plus tard.

En HTML5, le glisser-déposer fait partie du standard et n'importe quel élément peut être glissé-déposé.

1. Glisser-déposer HTML5

Le glisser-déposer (Drag and drop) fait partie de la norme HTML5.

2. Drag start

ondragstart : Une fonction est appelée, drag (événement), qui spécifie les données glissées

3. Définir les données de glisser

setData() : Définir le type de données et la valeur des données glissées.

4. Placement

ondragover : L'événement spécifie où placer les données glissées.

5. Placement

ondrop : lors du placement des données glissées et déposées, un événement de dépôt se produira

Résumé :

ondrop Événements déclenchés sur la cible du glisser (élément source) :

ondragstart : déclenché lorsque l'utilisateur commence à faire glisser l'élément
ondrag : déclenché lorsque l'élément est déplacé
ondragend : déclenché une fois que l'utilisateur a terminé faire glisser l'élément

Événement déclenché lorsque la cible est relâchée

ondragenter : Cet événement est déclenché lorsque l'objet glissé par la souris entre dans la portée de son conteneur
ondragover : Lorsqu'un objet glissé se trouve dans un autre conteneur d'objets. l'événement est déclenché lors d'un glisser dans la plage
ondragleave : Cet événement est déclenché lorsque l'objet glissé par la souris quitte la portée de son conteneur
ondrop : Cet événement est déclenché lorsque le bouton de la souris est relâché lors d'un processus de glissement

Exemple de glisser-déposer :

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

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique