HTML5 - 拖放事件

HTML5 - 拖放事件 首页 / HTML5入门教程 / HTML5 - 拖放事件

拖放(DnD)是强大的用户界面概念,通过单击鼠标,可以轻松地复制,重新排序和删除项目,这允许用户在元素上方单击并按住鼠标按钮,将其拖动到另一个位置,然后释放鼠标按钮以将元素放到那里。

要使用传统的HTML4实现拖放函数,开发人员要么不得不使用复杂的JavaScript编程,要么必须使用jQuery等其他JavaScript框架。

现在,HTML 5提供了拖放(DnD)API,该API为浏览器带来了本机DnD支持,从而使编写代码变得更加容易。

所有主要的浏览器(例如Chrome,Firefox 3.5和Safari 4等)都支持HTML 5 DnD。

拖放事件

在拖放操作的各个阶段都会触发许多事件。这些事件在下面列出-

Sr.No.Events & Remark
1

dragstart

当用户开始拖动对象时触发。

2

dragenter

在发生拖动时将鼠标第一次移到目标元素上时触发。

3

dragover

发生拖动时,将鼠标移到元素上时将触发此事件。

4

dragleave

当鼠标在拖动时离开元素时,将触发此事件。

链接:https://www.learnfk.comhttps://www.learnfk.com/html5/html5-drag-drop.html

来源:LearnFk无涯教程网

5

drag

在拖动对象时每次移动鼠标都会触发。

6

drop

在拖动操作结束时,在发生放置的元素上触发放置事件。

7

dragend

当用户在拖动对象时释放鼠标按钮时触发。

DataTransfer对象

所有拖放事件的事件侦听器方法都接受 Event 对象,该对象具有名为 dataTransfer 的只读属性。

event.dataTransfer 返回与事件关联的 DataTransfer 对象,如下所示-

function EnterHandler(event) {
   DataTransfer dt=event.dataTransfer;
   .............
}

DataTransfer 对象保存有关拖放操作的数据。可以根据与DataTransfer对象关联的各种属性来检索和设置此数据,如下所述-

Sr.No.DataTransfer attributes and their description
1

dataTransfer.dropEffect [= value ]

  • 返回当前选择的操作类型。

  • 可以设置此属性,以更改所选的操作。

  • 可能的值为none,copy,link和move。

2

dataTransfer.effectAllowed [=value]

  • 返回允许的操作类型。

  • 可以设置此属性,以更改允许的操作。

    无涯教程网

  • 可能的值为 none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized。

3

dataTransfer.types

返回一个DOMStringList,列出在dragstart事件中设置的格式。此外,如果要拖动任何文件,则类型之一将是字符串" Files"。

4

dataTransfer.clearData([format])

删除指定格式的数据。如果省略该参数,则删除所有数据。

5

dataTransfer.setData(format,data)

添加指定的数据。

6

data=dataTransfer.getData(format)

返回指定的数据。如果没有这样的数据,则返回空字符串。

7

dataTransfer..files

返回要拖动的文件的FileList(如果有)。

8

dataTransfer.setDragImage(element,x,y)

使用给定的元素更新拖动反馈,以替换任何先前指定的反馈。

9

dataTransfer.addElement(element)

将给定元素添加到用于呈现拖动反馈的元素列表中。

拖放示例

以下是实现拖放操作要执行的步骤-

第1步- 创建Draggable对象

这是要采取的步骤-

  • 如果要拖动元素,则需要将该元素的 draggable 属性设置为 true 。

  • 为 dragstart 设置一个事件侦听器,该事件侦听器存储要拖动的数据。

  • 事件监听器 dragstart 将设置允许的效果(复制,移动,链接或某种组合)。

以下是使对象可拖动的示例-

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type="text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type="text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id="boxA" draggable="true" 
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id="boxB">Dustbin</div>
      </center>
      
   </body>
</html>

这将产生以下输出-

第2步- 拖入目标

要接受放置,放置目标必须侦听至少三个事件。

  • dragenter event,该事件用于确定放置目标是否接受放置。

  • dragover event,用于确定向用户显示哪些反馈。

  • 最后,是 drop 事件,它允许执行实际的放置。

以下是将对象放入另一个对象的示例-

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

这将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

硅谷产品实战36讲 -〔曲晓音〕

Java核心技术面试精讲 -〔杨晓峰〕

从0打造音视频直播系统 -〔李超〕

etcd实战课 -〔唐聪〕

恋爱必修课 -〔李一帆〕

流程型组织15讲 -〔蒋伟良〕

攻克视频技术 -〔李江〕

自动化测试高手课 -〔柳胜〕

手把手带你写一个MiniSpring -〔郭屹〕

好记忆不如烂笔头。留下您的足迹吧 :)