多个div实现随意拖拽功能
鼠标事件
mousedown
mousemove
mouseup
注意事项:
被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;
onmousedown事件需要在window.onload时加载。
如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tuozhuai</title>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 5%;
}
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 10%;
left: 5%;
}
</style>
</head>
<body>
<div id="div1">
<input type="text" />
</div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script>
function drag(id) {
var odiv = document.getElementById(id)
odiv.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - odiv.offsetLeft;
var disY = ev.clientY - odiv.offsetTop;
document.onmousemove = function(ev2) {
var ev2 = ev2 || event;
var left = ev2.clientX - disX;
var top = ev2.clientY - disY;
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
if(left > w - odiv.offsetWidth) {
left = w - odiv.offsetWidth
}
if(left < 0) {
left = 0;
}
if(top < 0) {
top = 0;
}
if(top > h - odiv.offsetHeight) {
top = h - odiv.offsetHeight
}
odiv.style.left = left + "px";
odiv.style.top = top + "px"
}
document.onmouseup = function(ev2) {
document.onmousemove = null
}
}
}
drag("div1")
drag("div2")
drag("div3")
drag("div4")
</script>
</body>
</html>
多个div实现随意拖拽功能的更多相关文章
- DIV 实现可拖拽 功能（留档）
//可拖拽 功能 $.fn.extend({ //用法:$(element).jqDrag(); //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果 ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- js实现登陆页面的拖拽功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...
- React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
随机推荐
- 「插件」Runner更新Pro版，帮助设计师远离996
三年多前Runner团队在德国汉堡的骇客松上第一次发布了Sketch插件Runner的beta版本.从那以后,这个团队的目标一直很清晰: 创造一个加速设计工作流的工具. 他们只给Runner添加真正能 ...
- python学习——读取染色体长度（二、向前一步：通过染色体序列获得长度信息）
# 读取fasta # 解析每条序列的长度 chr1_seq = 'ATATATATAT' chr2_seq = 'ATATATATATCGCGCGCGCG' chr3_seq = 'ATATATAT ...
- 微信、qq可以上网，但是浏览器却不能上网怎么办
问题描述:微信.qq可以上网,但是浏览器却不能上网怎么办? 解决办法(步骤如下):(1)打开360安全卫士,点击更多 (2)进入到更多中,点击断网急救箱 (3)进入到断网急救箱,点击全面诊断 (4)一 ...
- 核主成分分析方法（KPCA）怎么理解？
先回顾下主成分分析方法.PCA的最大方差推导的结论是,把数据投影到特征向量的方向后,方差具有极大值的.假如先把数据映射到一个新的特征空间,再做PCA会怎样?对于一些数据,方差会更好地保留下来.而核方法 ...
- 查看电脑系统参数（Windows）
发现工作的电脑开了很多任务,都运行的很好,所以记录下来(以后买电脑可以参考一下) 一.硬件详情(i5第七代?) 硬盘信息(分有固态和机械硬盘): 固态硬盘直接给了系统使用: 二.体验指数(基本都达到了 ...
- 在Asp.Net Core中集成ABP Dapper
在实际的项目中,除了集成ABP框架的EntityFrameworkCore以外,在有些特定的场景下不可避免地会使用一些SQL查询语句,一方面是由于现在的EntityFrameworkCore2.X有些 ...
- Python基础：数据类型-字符串（7）
1.字符串基本操作 字符串是由字符组成的一串字符序列,字符串是有顺序的,从左到右,索引从0开始,依次递增. Python中字符串类型:str. Python中字符串的三种表示方式: (1)普通字符串: ...
- python3使用ctypes在windows中访问C和C++动态链接库函数示例
python3使用ctypes在windows中访问C和C++动态链接库函数示例 这是我们的第一个示例,我们尽量简单,不传参,不返回,不访问其他的动态链接库 一 测试环境介绍和准备 测试环境: 操作系 ...
- 一、查看MVC4还是MVC5
一.查看MVC版本找到那个dll.属性.就可以看到版本 二.MVC添加WebAPI Visual Studio 已向项目“Web”添加 ASP.NET Web API 2 的 全部集合 个依赖项. 项 ...
- Jetson TX1 SD card启动
上网DNS /var/run/NetworkManager/resolv.conf nameserver 211.100.225.34 nameserver 219.239.26.42