suchen

Heim >Web-Frontend >js-Tutorial >HTML-Drag-Drag-Ereignis

HTML-Drag-Drag-Ereignis

韦小宝
韦小宝Original
2018-05-18 15:39:463483Durchsuche

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>

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();

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!

css html JS 对象 事件 dom
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Methode zum Implementieren der Array- und String-KonvertierungNächster Artikel：JS-Methode zum Implementieren der Array- und String-Konvertierung

In Verbindung stehende Artikel

Mehr sehen