这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 javascript html5 轻松实现拖动功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
拖放(drag 和 drop)是 html5 标准组成,下面我们从五个方面对其进行叙述,分别是如何成为拖动物体,如何成为拖动目标,拖动物体上拥有的事件,拖动目标上拥有的事件以及拖放物体间如何传递信息。
拖动物体上拥有的事件
拖动目标上拥有的事件
如何成为拖动物体
在 html 中 img 元素默认可以进行拖拽,其它元素需要设置 draggable=true,即可对其进行拖拽。
<div draggable="true"></div>
如何成为拖动目标
html 中,元素默认不能成为放置目标,只有我们禁止了 drapenter 和 drapover 事件的默认行为时,可以称为拖放目标。
- droptarget.addEventListener('dragenter',
- function(event) {
- event.preventDefault();
- });
- droptarget.addEventListener('dragover',
- function(event) {
- event.preventDefault();
- });
拖放物体间如何传递信息
事件中具有一个 dataTransfer 对象,它拥有的两个常用方法 setData() 和 getData(),分别用于在存放拖拽信息以及获取拖拽信息。其中,setData() 只能在拖拽事件刚开始时设置,即 dragstart 事件时设置,getData() 则一般在放置获取,即 drop 事件触发时获取。
- // drapobj 拖拽元素
- // droptarget 放置目标
- dragobj.addEventListener('dragstart',
- function(event) {
- event.dataTransfer.setData('id', dragobj.id);
- });
- droptarget.addEventListener('drop',
- function(event) {
- var id = event.dataTransfer.getData('id');
- var obj = document.getElementById(id);
- event.preventDefault();
- this.appendChild(obj);
- });
完整代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- HTML5 拖拽
- </title>
- </head>
- <body>
- <div draggable="true">
- </div>
- <div style="height: 150px" id="dragobj" draggable="true">
- <img src="c_06.jpg" alt="">
- </div>
- <div id="droptarget" style="width: 150px; height: 150px;background-color: #eee;">
- </div>
- </body>
- <script>
- var droptarget = document.getElementById('droptarget');
- var dragobj = document.getElementById('dragobj');
- // drapobj 拖拽元素
- // droptarget 放置目标
- dragobj.addEventListener('dragstart',
- function(event) {
- event.dataTransfer.setData('id', dragobj.id);
- });
- droptarget.addEventListener('dragenter',
- function(event) {
- event.preventDefault();
- });
- droptarget.addEventListener('dragover',
- function(event) {
- event.preventDefault();
- });
- droptarget.addEventListener('drop',
- function(event) {
- var id = event.dataTransfer.getData('id');
- var obj = document.getElementById(id);
- event.preventDefault();
- this.appendChild(obj);
- });
- </script>
- </html>
存在问题
火狐浏览器中拖拽图片默认打开新窗口,根据 javascript 高级程序设计中在 drop 事件中禁止默认事件,未解决问题。
解决方法:将图片作为 div 的背景图片,将 div 作为拖拽物体,则不存在此问题。
最终代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>HTML5 拖拽</title>
- <style>
- div {
- width: 120px;
- height: 136px;
- }
- #dragobj {
- background: url('c_06.jpg') no-repeat;
- }
- #droptarget {
- background-color: #eee;
- }
- </style>
- </head>
- <body>
- <div id="dragobj" draggable="true">
- </div>
- <div id="droptarget"></div>
- </body>
- <script>
- var droptarget = document.getElementById('droptarget');
- var dragobj = document.getElementById('dragobj');
- // drapobj 拖拽元素
- // droptarget 放置目标
- dragobj.addEventListener('dragstart', function(event) {
- event.dataTransfer.setData('id', dragobj.id);
- });
- droptarget.addEventListener('dragenter', function(event) {
- event.preventDefault();
- });
- droptarget.addEventListener('dragover', function(event) {
- event.preventDefault();
- });
- droptarget.addEventListener('drop', function(event) {
- var id = event.dataTransfer.getData('id');
- var obj = document.getElementById(id);
- event.preventDefault();
- this.appendChild(obj);
- });
- </script>
- </html>
来源: http://www.phperz.com/article/17/0523/327151.html