拖拽：

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. node 常用命令

    nvm nvm list  列出安装的node npm install -g cnpm --registry=https://registry.npm.taobao.org  安装cnpm npm i ...

  2. Formal Definitions Using ASN.1 - SNMP Tutorial

    30.7 Formal Definitions Using ASN.1 The SMI standard specifies that all MIB variables must be define ...

  3. Architectural Model - SNMP Tutorial

    30.3 Architectural Model Despite the potential disadvantages, having TCP/IP management software oper ...

  4. WebStorage的使用

    HTML5中的WebStorage有两种类型的API:localStorage和sessionStorage: localStorage在本地永久性存储数据,除非显式将其删除或清空: sessionS ...

  5. ARCGIS常用几种本地数据AE初始化

    1.Personal GDB 新建一个在E盘的名为test的mdb: IWorkspaceFactory workspaceFactory = new AccessWorkspaceFactoryCl ...

  6. AE开发使用内存图层

    AE开发中,有时需要从磁盘中读取一些文件信息如坐标点转为图层并进行分析,此过程并不需要坐标点入库之类的操作,就可以创建一个内存图层解决问题.创建内存图层需要用到InMemoryWorkspaceFac ...

  7. centos 7.1 apache 源码编译安装

    Apache编译安装 一,需要软件: http://mirrors.cnnic.cn/apache//apr/apr-1.5.2.tar.gz 1.apr-1.5.2.tar.gz http://mi ...

  8. github上readme.md 格式

    参考:https://github.com/guoyunsky/Markdown-Chinese-Demo/edit/master/README.md

  9. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  10. UIScrollView的缩放原理

    当用户在UIScrollView身上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放自己内部的哪一个子控件(哪一块内容) 当用户在UIScrollView身上使用捏合手 ...