HTML-Drag-Drag-Ereignis-js-Tutorial-php.cn

HTML-Drag-Drag-Ereignis

韦小宝

Freigeben： 2018-05-18 15:39:46

Original

3474 Leute haben es durchsucht

In HTML wird die Ereignisverarbeitung in js abgeschlossen. HTML, js und CSS sind untrennbar miteinander verbunden. Das Folgende ist ein Beispiel für die Handhabung von Drag-and-Drop-Ereignissen in js.

Das Drag-Ereignis ist in zwei Teile unterteilt: Der eine ist die Verarbeitung des Drag-Ziels (d. h. das Drag-Ziel); der andere ist die Verarbeitung des Drag-Ziels (d. h. des Release-Ziels); .

Trigger-Ereignis auf dem Drag-Ziel (Quellelement):

ondragstart – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt

ondrag – wird ausgelöst, wenn das Element gezogen wird

ondragend – wird ausgelöst, nachdem der Benutzer das Ziehen des Elements abgeschlossen hat

Ereignis wird ausgelöst, wenn das Ziel losgelassen wird:

ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in seinen Container gelangt

ondragover – Dieses Ereignis wird ausgelöst, wenn ein gezogenes Objekt in den Container eines anderen Objekts gezogen wird

ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Bereich seines Containers verlässt

ondrop – Dieses Ereignis wird ausgelöst, wenn die Maustaste während eines Ziehvorgangs losgelassen wird

Der Implementierungscode lautet wie folgt: Box1 und Listen können zueinander gezogen werden

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{width: 200px;height: 250px;border:2px solid red;}
        #lists{ width:200px; height:250px; list-style: none;padding: 0;margin: 10px 0px; border:2px solid blue;}
        li{width: 150px;height: 30px; margin: 5px 0; padding:0;background: #ccc; line-height:30px;text-align: center ;}
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var lists=document.getElementById("lists");
            var lis=document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                lis[i].draggable=true;
                lis[i].flag=false;
                //1、拖拽开始
                lis[i].ondragstart=function () {
                    this.flag=true;
                }
                //2、拖拽移动
                 two.ondrag=function () {

                }
                //3、拖拽结束
                lis[i].ondragend=function () {
                    this.flag=false;
                }
            }
            //投放区事件
            //1、进入投放区
            box1.ondragenter=function (e) {
                e.preventDefault();
            }
            //2、在投放区内移动
            box1.ondragover=function (e) {
                e.preventDefault();
            }
            //3、离开投放区
            box1.ondragleave=function (e) {
                e.preventDefault();
            }
            //4、完成投放 此时可以在投放区内做处理
            box1.ondrop=function (e) {
                e.preventDefault();
                for(var i=0;i<lis.length;i++){
                    if(lis[i].flag){
                        box1.appendChild(lis[i]);
                    }
                }
            }

            lists.ondragenter=function (e) {
                e.preventDefault();
            }
            lists.ondragover=function (e) {
                e.preventDefault();
            }
            lists.ondragleave=function (e) {
                e.preventDefault();
            }
            lists.ondrop=function (e) {
                e.preventDefault();
                for(var i=0;i<lis.length;i++){
                    if(lis[i].flag){
                        lists.appendChild(lis[i]);
                    }
                }
            }
        }
    </script>
</head>
<body>
    <p id="box1"></p>
    <ul id="lists">
        <li>数据1</li>
        <li>数据2</li>
        <li>数据3</li>
        <li>数据4</li>
        <li>数据5</li>
        <li>数据6</li>
    </ul>
</body>
</html>

Nach dem Login kopieren

Darunter: Die Methode getElementsByTagName() gibt eine Sammlung von Objekten mit dem angegebenen Tag-Namen zurück.

e.preventDefault(); soll das Standard-Drag-Ereignis des Systems verhindern.

appendChild() fügt dem angegebenen Steuerelement ein Steuerelement hinzu.

e.preventDefault();

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt des HTML-Drag-Events, ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen:

Verwenden Sie JS und HTML, um einen einfachen Sketchpad-Code zu erstellen

Js-Prozess zum Betreiben von DOM-Objekten

HTML-JS-bezogene Probleme

Das obige ist der detaillierte Inhalt vonHTML-Drag-Drag-Ereignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!