首页 > 代码库 > HTML5中的拖放

HTML5中的拖放

2024-08-31 06:03:48   219人阅读

1.实现拖放的步骤

   ①将对象的属性设置为可拖放，即draggable=“true”

   ②编写有关拖放事件的处理函数。

2.使用dataTransfer对象

   dataTransfer对象是事件对象的一个属性，用于从被拖拽元素向放置目标传递字符串格式的数据。因为是事件对象的属性，在拖放事件的事件处理程序中访问dataTranfer对象

   ①dataTransfer的属性

       dropEffect属性：表示拖放操作的视觉效果，该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值为none、copy、link、move。

       effectAllowed属性：用来指定当元素被拖放时所允许的视觉效果，可以指定的值为none、copy、copyLink、copyMove、link、linkMove、move、all.

       type属性：存入数据的种类，字符串的伪数组。

   ②dataTransfer的方法

       void clearData方法：清除dataTransfer对象中存放的数据，如果省略参数，则清除全部数据。

       void setData方法：向dataTransfer对象内存入数据。

       DOMString getData方法：从dataTransfer对象中读取数据。

       void setDragImage方法：用img元素设置拖放图标

  setData()方法在拖放开始时向dataTransfer对象中存入数据，它用type属性来指定数据MIME类型，而getData()方法在拖动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除dataTransfer对象内的数据。

3.设定拖放时的视觉效果

   dropEffect属性与effectAllowed属性结合设定拖放时的视觉效果。

    effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all。

    dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、copy、link、move。

 

    dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内

     规则：

     如果effectAllowed属性设定none。则不允许拖放元素。

     如果dropEffect属性设定为none，则不允许被拖放到目标元素中。

     如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。

     如果effectAllowed属性设定为具体效果，dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。

 

4.自定义拖放图标

5.实例：选择图形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        #div1,#div2,#div3,#div4
        {
            border:3px  dashed #ccc;
            float: left;
            margin: 10px;
            min-height: 100px;
            padding: 10px;
            width: 220px;
        }
    </style>

    <script type="text/javascript">

        //关闭默认处理
        function allowDrop(e)
        {
            e.preventDefault();
        }
        //拖放操作
        function drag(e)
        {
            //设置传递的对象
           // e.dataTransfer.setData("Text", e.target.id);
            e.dataTransfer.setData("Text",e.target.id);

            //设置自定义拖动图标
            var dragIcon = document.createElement(‘img‘);
            dragIcon.src = ‘img/dragimg.png‘;
            var dt = e.dataTransfer;
            dt.setDragImage(dragIcon, -10, -10);
        }

        function drop(ev)
        {
            ev.preventDefault();
            //获取传递过来的对象
            var data=ev.dataTransfer.getData("Text");
            //将新对象加入到该对象中
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
     <div id="div1" ondrog="drop(event)" ondragover="allowDrop(event)">
         <h2>选择颜色</h2>
         <img src="img/bg_01.png" draggable="true" ondragstart="drag(event)" id="drag1" />

         <img src="img/bg_02.png" draggable="true" ondragstart="drag(event)" id="drag2" />
         <img src="img/bg_03.png" draggable="true" ondragstart="drag(event)" id="drag3" />
     </div>

     <div  id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
         <h2>红色</h2>
     </div>

     <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
         <h2>绿色</h2>
     </div>

     <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
         <h2>蓝色</h2>
     </div>

</body>
</html>

技术分享

 

     

     

HTML5中的拖放


联系
我们