javascript html5轻松实现拖动功能


Posted in Javascript onMarch 01, 2017

拖放(drag和drop)是html5标准组成,下面我们从五个方面对其进行叙述,分别是如何成为拖动物体,如何成为拖动目标,拖动物体上拥有的事件,拖动目标上拥有的事件以及拖放物体间如何传递信息。

拖动物体上拥有的事件

  • dragstart (在物体刚被拖动时触发)
  • drag (在dragstart事件触发之后就被触发)
  • dragend (拖动事件结束时触发)

拖动目标上拥有的事件

  • dragenter (当拖拽元素进入放置目标时触发)
  • dragover (当拖拽元素在放置目标中移动时触发,类似于mouseover)
  • drop (当拖拽元素放置在放置目标中时触发)

如何成为拖动物体

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JS创建对象的写法示例
Nov 04 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
详解数组Array.sort()排序的方法
May 09 #Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 #Javascript
javascript中replace使用方法总结
Mar 01 #Javascript
jQuery validate 验证radio实例
Mar 01 #Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 #Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 #Javascript
分分钟玩转Vue.js组件(二)
Mar 01 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
机电专业求职信
2014/06/14 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
全陪导游词
2015/02/04 职场文书
学校端午节活动总结
2015/02/11 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
事业单位岗位说明书
2015/10/08 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers