多个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的回调函数中又重新排序了存放数据的数组.但 ...
随机推荐
- Java基础系列--07_Object类的学习及源码分析
Object: 超类 (1)Object是类层次结构的顶层类,是所有类的根类,超类. 所有的类都直接或者间接的继承自Object类. 所有对象(包括数组)都实现这个类的方法 (2)Object ...
- tensorflow的基本认识
版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/10741013.html 作者:窗户 ...
- fastJson反序列化异常，JSONException: expect ':' at 0, actual =
com.alibaba.fastjson.JSONException: expect , actual = at com.alibaba.fastjson.parser.DefaultJSONPars ...
- QPen
Help on class QPen in module PyQt5.QtGui: class QPen(sip.simplewrapper) | QPen() | QPen(Qt.PenStyl ...
- PHP将汉字转为拼音
没什么难度,最大的难点应该是需要有一个汉字-拼音库. <?php function spell($str, $ishead=0){ $restr = ''; $str = trim($str); ...
- C# 菜单之递归算法
今天因为菜单的问题, 需要用到递归算法, 在此记录一下: 1.表结构如下:(这里只是展示两个比较重要的字段) ,大家应该都看明白 2.先定义一个菜单结构类. 3.实现递归. private List& ...
- myeclipse新建javaweb项目，并部署到tomcat
myeclipse使用的版本: 新建web项目: File-->New-->Web Project,输入项目名称,选择J2EE规范. 完成后: JRE System Library是只要做 ...
- java基础-01基本概念
java的特点 跨平台 所谓的平台,我们可以理解为操作系统. 大部分语言是不能跨平台的,比如c语言的程序在windows和linux上需要编写不同的代码. java程序是运行在JVM(Java Vir ...
- Mysql 中的日期时间字符串查询
一.将数据库中的Date格式的数据,或者指定日期的字符串格式化为想要的样式 DATE_FORMAT (date, format)能根据格式串format 格式化日期或日期和时间值date,返回结果字符 ...
- win10下安装ubuntu18.04
在win10下安装Ubuntu18.04,双系统共存.Ubuntu 18.04 使用的是Gnome桌面. 查看系统的启动模式: Win+R打开运行,输入msinfo32,回车查看系统信息.在BIOS模 ...