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学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
Angular2 组件交互实例详解
Aug 24 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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 has encountered an Access Violation
2007/01/15 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
js动态切换图片的方法
2015/01/20 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue脚手架中配置Sass的方法
2018/01/04 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
node中实现删除目录的几种方法
2019/06/24 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python collections模块实例讲解
2014/04/07 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
解决Django连接db遇到的问题
2019/08/29 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
护士自荐信
2013/10/25 职场文书
文明村创建实施方案
2014/03/27 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
大学生十八大感想
2015/08/11 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python