拖拽：

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. python 下 tinker、matplotlib 混合编程示例一个

    该例是实现了 Tinker 嵌入 matplotlib 所绘制的蜡烛图(k 线),数据是从 csv 读入的.花一下午做的,还很粗糙,仅供参考.python 代码如下: import matplotli ...

  2. mysql安装和配置

    一.下载mysql mysql下载页 我用的是5.6,点击旁边的"Looking for previous GA versions?"按钮就能看到5.6版本 mysql-5.6.3 ...

  3. Vue.JS 对比其他框架

    Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...

  4. Java编程中的美好

    java程序员如何写出"优美"代码,动力节点告诉你怎么办: 1.注释尽可能全面 对于方法的注释应该包含详细的入参和结果说明,有异常抛出的情况也要详细叙述:类的注释应该包含类的功能说 ...

  5. unity之初识shader

    自己做个总结先.当然文中很多内容都是从各位大神的文档当中看的.我只是站在巨人的肩膀上.       首先什么是shader?其实就是一个在显示屏当中的显示程序,俗称着色器.它可以定义物体在硬件显示屏当 ...

  6. HashMap Hasptable的区别

    HashTable的应用非常广泛,HashMap是新框架中用来代替HashTable的类,也就是说建议使用HashMap,不要使用HashTable.可能你觉得HashTable很好用,为什么不用呢? ...

  7. 深入理解redis持久化

    持久化方式: 快照(RDB)方式,默认方式,文件以二进制方式保存到RDB文件. 文件追加(AOF)方式,文件以协议文本的方式write到AOF文件. 作用,重启后的数据恢复.当两种方式都启用时,red ...

  8. Solr的主界面加登录权限

    如题:效果如下图zu 只需两步: 1.tomcat-users.xml   下添加 <user username="admin" password="new-pas ...

  9. ZOJ 3699 Dakar Rally

    Dakar Rally Time Limit: 2 Seconds      Memory Limit: 65536 KB Description The Dakar Rally is an annu ...

  10. Linux下安装和配置JDK与Tomcat（升级版）

    在这个版本 Linux下安装和配置JDK与Tomcat(入门版) 的基础上优化升级 1.下载相关软件 apache-tomcat-6.0.37.tar.gz jdk-6u25-linux-i586-r ...