拖拽：

draggable="true"页面上就能实现拖拽
事件：

ondragstart 拖拽开始事件
ondrag 拖拽中
ondragend 拖拽结束事件

投放区事件：

ondragenter 进入投放区
ondragover 投放区移动
ondragleave 离开投放区
ondrop 投放区投放

例文：

<head>
<meta charset="UTF-8">
<title></title>
<style>
#dropBlock{
width:300px;
height:300px;
position: absolute;
left:0;
top:0;
background: black;
}
#moveBlock{
width: 100px;
height:100px;
position: absolute;
background: red;
left:0;
top:300px;
}
</style>
</head>
<body>

<div id="dropBlock"></div>
<div id="moveBlock" draggable="true"></div>
</body>
<script src="js/drag.js"></script>
<script>
(function(){
var dropBlock = document.getElementById("dropBlock");
var moveBlock = document.getElementById("moveBlock");
var moveBlockInisPos = getDimensions(moveBlock);
var startPoint;
var moveBlockPos;
moveBlock.ondragstart = function(){
var e = getEventObject(e);
//获取鼠标点击时的坐标
startPoint = getPointerPositionInDocument(e)
//获取移动块的位置
moveBlockPos = getDimensions(moveBlock);
}
// moveBlock.ondrag = function(){
// console.log("拖拽中");
// }
// moveBlock.ondragend = function(){
// console.log("拖拽结束");
// }
// dropBlock.ondragenter = function(){
// console.log("进入投放区");
// }
dropBlock.ondragover = function(e){
console.log("投放区移动");
//阻止默认事件发生
e.preventDefault();
}
// dropBlock.ondragleave = function(){
// console.log("离开投放区");
// };
dropBlock.ondrop = function(){
var e = getEventObject(e);
var newPoint = getPointerPositionInDocument(e);
var distance = getPointerDistance(startPoint,newPoint);
moveBlock.style.left = (moveBlockPos.left + distance.x)+"px";
moveBlock.style.top = (moveBlockPos.top + distance.y)+"px";
}
dropBlock.ondragleave = function(){
console.log("离开投放区");
var e=getEventObject(e);

moveBlock.style.left = moveBlockInisPos.left + "px";
moveBlock.style.top = moveBlockInisPos.top + "px";
};
}())
</script>

HTML5中的对象的拖拽的更多相关文章

  1. 快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型

    前言 3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成.这个 Demo 左侧为 ...

  2. javaScript drag对象进行拖拽使用详解

    目录 drag简介 兼容性 drag事件 拖拽流程 DataTransfer对象 drag拖放桌面文件 drag实例 小结 drag简介 HMTL5提供的支持原生拖拽的实现 兼容性如何? 桌面端的支持 ...

  3. 理解HTML5中Range对象

    1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在H ...

  4. vue2.0 不引用第三方包的情况下实现嵌套对象的拖拽排序功能

    先上一张效果图,然后再上代码(由于只做效果,未做数据相关的处理:实际处理数据时不修改 dom 元素,只是利用 dom 元素传递数据,然后需改数据,靠数据驱动效果) <div :id=" ...

  5. openlayers中实现点的拖拽（modify）,在layer中增加修改删除point。

    最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置 ...

  6. QQ中未读气泡拖拽消失的实现（参照一位年轻牛B的博主的思路自己实现了一下）

    原文链接:http://kittenyang.com/drawablebubble/,博主年轻却很有思想.相仿的年纪,很佩服他! 首先分析拖拽时的图,大圆.不规则的图(实际上时有规律的不然也画不出来, ...

  7. winform中文本框添加拖拽功能

    对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...

  8. Android中的ScrollView实现 拖拽反弹效果

    public class BounceScrollView extends ScrollView { private View inner;// 孩子View private float y;// 点 ...

  9. html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换

    在网页开发中遇到这样一个问题,在使用select的时候,想让里面的文字水平居中.首先想到的是text-align:center;但是发现在Chrome浏览器下不兼容,需要使用到text-align-l ...

随机推荐

  1. Linux 下Nginx编译安装

    Untitled .note-content {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsof ...

  2. 利用chorme调试手机网页

    太方便了,很实用的技巧(特意记录一下) 1.pc端安装最新的chrome 2.手机端安装最新的chrome ( Android机 ) 3.USB连接线 4.打开电脑的chrome 在地址栏输入 chr ...

  3. java.lang.NoClassDefFoundError:org/apache/commons/lang/exception/NestableRuntimeException错误的解决

    java.lang.NoClassDefFoundError 是运行时jvm找不到对应类.这种情况是少包的导致的.根据提示语添加对应的jar包就可以. 感叹一下:maven真是一个伟大的东西,在包的依 ...

  4. [转] 64位windows下添加postgreSQL odbc数据源

    系统环境:windows7 64位 postgreSQL9.0(64bit)   ps:安装postgreSQL时确定安装了odbc驱动.   问题:点击“开始->控制面板->管理工具-& ...

  5. Druid初步学习

    Druid是一个JDBC组件,它包括三部分:  DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体系. DruidDataSource 高效可管理的数据库连接池 ...

  6. [NHibernate]关联映射

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  7. poj1399 hoj1037 Direct Visibility 题解 （宽搜）

    http://poj.org/problem?id=1399 http://acm.hit.edu.cn/hoj/problem/view?id=1037 题意: 在一个最多200*200的minec ...

  8. exception catch doesn't work?? (python 3)

    exception catch doesn't work?? (python 3) except u.URLError, e: ^ SyntaxError: invalid syntax in Pyt ...

  9. linux下编译安装vim7.4并安装clang_complete插件

    linux下编译安装vim7.4并安装clang_complete插件 因为debian里软件仓库中下载安装的vim是不支持python写的插件的(可以打开vim,在命令模式先输入:py测试一下),导 ...

  10. 【GWAS文献】基于GWAS与群体进化分析挖掘大豆相关基因

    Resequencing 302 wild and cultivated accessions identifies genes related to domestication and improv ...