Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Beispiele für HTML5-Drag-and-Drop-Funktionen

Ausführliche Erläuterung der Beispiele für HTML5-Drag-and-Drop-Funktionen

零下一度Original: 2017-07-16 15:37:271659Durchsuche

HTML5 bietet eine dedizierte Drag-and-Drop-API, sodass Sie in Zukunft nicht mehr herumspielen müssen, um einen solchen Effekt zu erzielen. Da der Opera-Browser daran jedoch offenbar kein Interesse hat und seine Vielseitigkeit immer noch fraglich ist, werde ich hier kurz darauf eingehen. Drag & Drop sind Teil des HTML5-Standards.

Browser-Unterstützung

Internet Explorer 9, Firefox, Opera 12, Chrome und Safari 5 unterstützen Drag & Drop.

Gezogenes Element, DragElement:

1. Ereignis hinzufügen: ondragstart

2. Attribut hinzufügen: dragable

Elemente platzieren, dropElement:

1. Ereignisse hinzufügen: ondargenter, ondragover, ondragleave, ondragend, ondrop

Es ist Ereignissen wie „Maus rein und raus“ und dem Literal sehr ähnlich Die Bedeutung ist: Es ist leicht zu verstehen, daher werde ich im Folgenden nicht auf Details eingehen, um es anhand von Beispielen zu veranschaulichen.

1. Drag & Drop zwischen Elementen auf der Seite

Das Folgende ist ein kleines Beispiel für Drag & Drop zwischen p, um zu zeigen, wie jedes Ereignis ausgelöst wird:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>

    <style type="text/css">

        #dropEle
        p
        {
            float: left;
        }

    </style>

    <script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>


    <script type="text/javascript">

        /**
         * 拖放（Drag 和 drop）是 HTML5 标准的组成部分。
         * 浏览器支持
         *Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
         */
        $(function ()
        {
            $("#dragEle")[0].ondragstart = function (event)
            {
                console.log("dragStart");
                event.dataTransfer.setData("Text", event.target.id);
            };

            /**
             * 当放置被拖数据时，会发生 drop 事件。
             * 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
             * @param event
             */
            $("#dropEle")[0].ondrop = function (event)
            {
             /*   for (var p in event.dataTransfer)
                {
                    console.log(p + " = " + event.dataTransfer[p] + " @@");
                }
            */
                console.log("onDrop");
                var id = event.dataTransfer.getData("Text");
                $(this).append($("#" + id).clone().text($(this).find("p").length));
                event.preventDefault();
            };

            /**
             * ondragover 事件规定在何处放置被拖动的数据。
             *默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
             */
            $("#dropEle")[0].ondragover = function (event)
            {
                console.log("onDrop over");
                event.preventDefault();
            }

            $("#dropEle")[0].ondragenter = function (event)
            {
                console.log("onDrop enter");
            }

            $("#dropEle")[0].ondragleave = function (event)
            {
                console.log("onDrop leave");
            }

            $("#dropEle")[0].ondragend = function (event)
            {
                console.log("onDrop end");
            }


        });

    </script>

</head>
<body>

<p style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
     draggable="true" id="dragEle" >

</p>


<p style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
     id="dropEle"></p>


</body>
</html>

Einige zu beachtende Punkte:

a. Das Standardverhalten von Ereignissen muss in ondragover organisiert werden. Standardmäßig können Daten/Elemente nicht in anderen Elementen platziert werden.

b. Das Standardverhalten des Drop-Ereignisses besteht darin, es als Link zu öffnen, daher muss sein Standardverhalten verhindert werden.

Sie bemerken möglicherweise auch: Beim Ziehen und Ablegen enthält das Ereignis ein event.dataTransfer-Objekt. Im obigen Beispiel haben wir die setData-Methode des Objekts verwendet, um die ID des gezogenen p zu übergeben und diese dann abzurufen es im Drop Die ID und das Element werden kopiert und zum platzierten p hinzugefügt.

Im Folgenden werden andere Methoden dieses Objekts vorgestellt:

event.dataTransfer:

items = [object DataTransferItemList] @@drag_drop.html:44

files = [object FileList] @@drag_drop.html:44

types = text/plain @@drag_drop.html:44

effectAllowed = all @@drag_drop.html:44

dropEffect = none @@drag_drop.html:44

clearData = function clearData() { [native code] } @@drag_drop.html:44

getData = function getData() { [nativer Code] } @@drag_drop.html:44

setData = function setData() { [nativer Code] } @@drag_drop.html:44

setDragImage = function setDragImage() { [native code] } @@

Ich habe js verwendet, um alle seine Attribute auszudrucken:

1. getData und setData wurden im obigen Beispiel verwendet, und clearData dient zum Löschen des Satzes Daten.

2. Es ist erwähnenswert, dass beim Ziehen einer oder mehrerer im Betriebssystem ausgewählter Dateien die Informationen der gezogenen Dateien in Dateien gespeichert werden und wir dann die Datei abrufen können Informationen über Dateityp, Länge, Inhalt und anschließendes Hochladen.

3. setDragImage(image, x, y) wird verwendet, um das Effektbild festzulegen, das sich während der Mausbewegung mit der Maus bewegt. Muss in Dragstart festgelegt werden.

4. Typen, effectAllowed und dropEffect sind jeweils der Typ des gezogenen Elements und der von der Maus während des Ziehvorgangs angezeigte Stil. Ich denke, diese Attribute können ignoriert werden und werden im Allgemeinen nicht verwendet.

Verwandte Punkte

DataTransfer-Objekt: Das zum Übertragen des Drop-Objekts verwendete Medium, normalerweise Event.dataTransfer.

Draggable-Attribut: Das Label-Element muss auf Draggable=True gesetzt sein, sonst hat es keine Wirkung, zum Beispiel:

9056d08224ae92ffa8fb99f5779baaaa

ondragstart-Ereignis: ein Ereignis, das ausgelöst wird, wenn das Ziehen des Elements beginnt. Dieses Ereignis wirkt auf das gezogene Element

ondragenter Ereignis: wenn das Ziehen beginnt Das Ziehen des Elements beginnt. Das Ereignis wird ausgelöst, wenn das Element in das Zielelement eintritt auf das Zielelement

ondragend-Ereignis: ein Ereignis, das ausgelöst wird, wenn sich das gezogene Element auf dem Zielelement befindet und die Maus losgelassen wird. Dieses Ereignis wirkt auf das Zielelement

ondragend-Ereignis: ein ausgelöstes Ereignis wenn das Ziehen abgeschlossen ist. Dieses Ereignis wirkt auf das gezogene Element.

Event.preventDefault()-Methode: verhindert die Ausführung einiger Standardereignismethoden. PreventDefault() muss in ondragover ausgeführt werden, sonst wird das ondrop-Ereignis nicht ausgelöst. Wenn Sie außerdem etwas aus anderen Anwendungen oder Dateien ziehen, insbesondere Bilder, besteht die Standardaktion darin, das Bild oder zugehörige Informationen anzuzeigen, und führt nicht tatsächlich das Ablegen aus. Zu diesem Zeitpunkt müssen Sie das Ondragover-Ereignis des Dokuments verwenden, um es direkt zu beenden.

Event.effectAllowed-Eigenschaft: Es handelt sich um den Drag-Effekt.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für HTML5-Drag-and-Drop-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Beispiel für ein HTML5-Videowiedergabe-TutorialNächster Artikel：Beispiel für ein HTML5-Videowiedergabe-Tutorial

In Verbindung stehende Artikel

Mehr sehen