Home > Article > Web Front-end > Detailed explanation of HTML5 drag and drop function examples

Detailed explanation of HTML5 drag and drop function examples

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

HTML5 provides a dedicated drag-and-drop API, so you don’t have to mess around to achieve this kind of effect in the future. However, considering that the Opera browser does not seem to be interested in this, and its versatility is still open to question, so I will briefly talk about it here. Drag and drop are part of the html5 standard.

Browser support

Internet Explorer 9, Firefox, Opera 12, Chrome and Safari 5 support drag and drop.

Draged element, dragElement:

1. Add event: ondragstart

2. Add attribute: dragable

Place elements, dropElement:

1. Add events: ondargenter, ondragover, ondragleave, ondragend, ondrop

It is very similar to the mouse in and out events. The literal meaning is It's easy to understand, so I won't go into details. I will use examples to illustrate it below.

1. Drag and drop between elements on the page

The following is a small example of drag and drop between p to show how each event is triggered:

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

A few points to note:

a. The default behavior of events must be organized in ondragover. By default, data/elements cannot be placed into other elements.

b. The default behavior of the drop event is to open it as a link, so its default behavior needs to be prevented.

You may also notice: when dragging and dropping, the event contains an event.dataTransfer object. In the above example, we used the setData method of the object to pass the id of the dragged p, and then obtained it in the drop. The id, and the element is copied and added to the placed p.

The following introduces other methods of this object:

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() { [native code] } @@drag_drop.html:44

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

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

I used js to print out all its attributes:

1. getData and setData have been used in the above example, and clearData is to clear the set data.

2. It is worth noting that files. When one or more files selected in the operating system are dragged into the p, the information of the dragged files will be stored in files, and then we can get the file information through file. Type, length, content and then upload.

3. setDragImage(image, x, y) is used to set the effect image that moves with the mouse during the mouse movement. Must be set in dragstart.

4. Types, effectAllowed and dropEffect are respectively the type of the dragged element and the style displayed by the mouse during the dragging process. I think these attributes can be ignored and are generally not used.

Related Key Points

DataTransfer object: The medium used to transfer the drop object, generally Event.dataTransfer is used.

draggable attribute: The label element must be set with draggable=true, otherwise it will have no effect, for example:

4a95d3c4ade92cc9d5287984159187aflist 116b28748ea4df4d9c2150843fecfba68

ondragstart event: an event triggered when the drag element starts to be dragged. This event acts on the dragged element.

ondragenter event: when the drag element starts to be dragged The event is triggered when the element enters the target element. This event acts on the target element.

ondragover event: The event is triggered when the drag element moves on the target element. This event acts on the target element.

ondrop event: an event triggered when the dragged element is on the target element and the mouse is released. This event acts on the target element.

ondragend event: an event triggered when the drag is completed. This event Acts on the dragged element

Event.preventDefault() method: Prevents the execution of some default event methods. PreventDefault() must be executed in ondragover, otherwise the ondrop event will not be triggered. In addition, if you drag something from other applications or files, especially pictures, the default action is to display the picture or related information, and does not actually execute drop. At this time, you need to use the document's ondragover event to kill it directly.

Event.effectAllowed property: It is the effect of dragging.

The above is the detailed content of Detailed explanation of HTML5 drag and drop function examples. 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 video playback tutorial exampleNext article：HTML5 video playback tutorial example

See more

Detailed explanation of HTML5 drag and drop function examples

Related articles