拖拽：

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. Instant Radiosity实现

    本来说等把课程作业做完再来弄这个,但是还是没有忍住,先做了,主要原因还是这个算法很容易实现.这个算法在1997年由Keller首次提出.虽然名字叫Instant Radiosity,但是它和Radio ...

  2. Debian 8中dpkg -i自动解决依赖关系

    dpkg -i 后#apt-get update &&apt-get -f install

  3. SSH Junit4测试

    package test; import static org.junit.Assert.*; import java.util.List; import org.hibernate.SessionF ...

  4. Android Studio的配置问题——Intel HAXM is required to run this AVD,VT-x is disabled in BIOS;

    Intel HAXM is required to run this AVD,VT-x is disabled in BIOS;Enable VT-x in your BIOS security se ...

  5. Sql Server FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  6. LYDSY模拟赛day1 String Master

    /* 暴力枚举两个后缀,计算最长能匹配多少前缀. 最优策略一定是贪心改掉前 k 个失配的字符. 时间复杂度 O(n3). */ #include<cstdio> ],b[]; int ma ...

  7. npapi插件开发流程与实例

    近期做NPAPI插件,网上的介绍还是比较多,但就是没有一个完整的例子,FQ也没找到,难得NPAPI要走向陌路了?就不去深究额,先解决目前遇到的问题. 现状:已有Activex(仅兼容IE32/64位浏 ...

  8. int类型的正负数转换

    int aid = -this.id; 不能直接转 必须先赋值给一个变量 int c = this.id; int a = c * (-1); this.id = a;

  9. phpMyAdmin提示：配置文件权限错误，无法写入！解决方法

    访问phpMyAdmin提示: 配置文件权限错误,无法写入! 解决办法: chmod -R 755 ./phpmyadmin 这样设置下phpMyAdmin目录权限属性为就可以访问了.原来phpMyA ...

  10. 多文件上传 file-uploader.js

    插件暴露给用户可以设置的参数 插件构成 声明一个全局对象qq,在对象上封装几个方法,类似JQUERY的方法 qq.extend 合并对象属性,类似$.extend() qq.indexOf 获取元素索 ...