拖拽：

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. PHP WAMP 文件上传 及 简单的上传预览

    ...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...

  2. ps你最容易忽略的知识

    了解更多ps知识 1. 快速打开文件­ 双击Photoshop的背景空白处(默认为灰色显示区域)即可打开选择文件的浏览窗口.­ 2. 随意更换画布颜色­ 选择油漆桶工具并按住Shift点击画布边缘,即 ...

  3. .Net 中的反射(反射特性) - Part.3

    反射特性(Attribute) 可能很多人还不了解特性,所以我们先了解一下什么是特性.想想看如果有一个消息系统,它存在这样一个方法,用来将一则短消息发送给某人: // title: 标题:author ...

  4. AE开发实现Spatial Join Analysis

    总体网上资料不多,包括esri帮助文档都写的很简单,没有各个string参数如match_option之类的可以输入的string限制,导致在摸索中gp.Execute时报错n回. 结合网上搜集资料及 ...

  5. 创建线注记LineElement

    1.根据2点创建一条线 /// <summary> /// 创建线 /// </summary> /// <param name="pnt1"> ...

  6. C++箴言：理解typename的两个含义

    C++箴言:理解typename的两个含义 问题:在下面的 template declarations(模板声明)中 class 和 typename 有什么不同? template<class ...

  7. wordpress 函数、条件判断以及文件的总结

    WordPress基本模板文件 一套完整的WordPress模板应至少具有如下文件: style.css : CSS(样式表)文件 index.php : 主页模板 archive.php : Arc ...

  8. jsp一句话

    <%@page import="java.io.*,java.util.*,java.net.*,java.sql.*,java.text.*"%><%!Stri ...

  9. Bash 为何要发明 shopt 命令

    在 Bash 中,有两个内置命令用来控制 Bash 的各种可配置行为的开关(打开或关闭),这些开关称之为选项(option).其中一个命令是 set,set 命令有三种功能:显示所有的变量和函数:修改 ...

  10. PAT MOOC dataStructure 4-1

    数据结构练习 4-1 AVL 树 1. 题目: Input Specification: Each input file contains one test case. For each case, ...