HTML5拖放作用

日期:2020-10-13 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

拖放(Drag 和 drop)是 html5 规范的构成一部分。

访问器适用

Internet Explorer 9、Firefox、Opera 12、Chrome 和 Safari 5 适用拖放。

被拖元素,dragElement :

1、加上恶性事件:ondragstart

2、加上特性:dragable

置放元素,dropElement:

1、加上恶性事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop

和mouser划入划出1类的恶性事件很相近,字面也很好了解,不赘述了,下面会测试用例子来讲明。

1、网页页面上元素间的拖放

下面用个小事例,div间的拖放来展现,各个恶性事件怎样被开启:

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

    <style type="text/css">

        #dropEle
        div
        {
            float: left;
        }

    </style>

    <script src="../../jquery⑴.8.3.js" type="text/javascript" charset="utf⑻"></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("div").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>

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

</div>


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


</body>
</html> 

必须留意几点:

a、ondragover中务必机构恶性事件的默认设置个人行为,默认设置地,没法将数据信息/元素置放到别的元素中。

b、drop 恶性事件的默认设置个人行为是以连接方式开启,因此也必须阻拦其默认设置个人行为。

也有将会留意到:在拖放时,event中包括1个event.dataTransfer 目标,上例中大家应用了该目标的setData方式传送了拖拽div的id,随后在drop中获得该id,而且拷贝了该元素加上到置放的div中。

下面详细介绍下该目标的别的方式:

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] } @@

我应用了js复印出了它全部的特性:

1、getData,setData上例早已应用了,clearData便是消除设定的数据信息。

2、值得留意的是files,当把实际操作系统软件选中择的1个或好几个文档拖入该div中,files中会储存拖入文档的信息内容,随后大家根据file能够获得文档的种类,长度,內容随后完成提交。

3、setDragImage(image, x, y)用于设定电脑鼠标挪动全过程中随电脑鼠标1起挪动的实际效果图。务必在dragstart中设定。

4、types,effectAllowed和dropEffect各自是拖入元素的种类,拖拽全过程中电脑鼠标显示信息的款式,我感觉能够忽视了这几个特性,1般用不到。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:HTML5完成锚点时请应用id替代name 返回下一篇:没有了