鼠标事件

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实现随意拖拽功能的更多相关文章

  1. DIV 实现可拖拽 功能（留档）

    //可拖拽 功能 $.fn.extend({    //用法:$(element).jqDrag();    //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果    ...

  2. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  3. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  4. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  5. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  6. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  7. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  8. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  9. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

随机推荐

  1. bilibili用户信息全栈爬取

  2. 网页控制脚本修改系统信息 C语言调用uci

    0 交叉编译生成程序 http://tuntuntun.net/%E5%9C%A8OpenWrt%E4%B8%8A%E8%BF%90%E8%A1%8C%E7%AC%AC%E4%B8%80%E4%B8% ...

  3. 【微信小程序】

    按照惯例,学习一门新技术或者新框架,咱们还是从官方提供的文档开始 微信小程序官方教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 微信小程序开发流程(博客): ...

  4. Trie树（字典树）推荐文章

    Trie树也被称为字典树,通过这个名字,可以明显知道这种树的结构:像字典一样进行查找的树(想想采用拼音法查找汉字的时候的过程,实质上就是一个逐字母匹配的过程).Trie树就是利用了这种思想构造出来的多 ...

  5. MVC和MVVM

    MVC和MVVM的qu'bie 1. Mvvm定义MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型.[模型]指的是后端传递的数据.[视图]指的是所看到的页面.[视图模型 ...

  6. web开发中各种宽高

    Gosper 曲线:https://www.cnblogs.com/tgzhu/p/8286616.html

  7. EntityFrameworkCore中的OnModelCreating

    在我们使用EntityFrameworkCore作为数据库ORM框架的时候,不可避免的要重载DbContext中的一个虚方法OnModelCreating,那么这个方法到底是做什么的?到底有哪些作用呢 ...

  8. tp5问题整理

    问题一:致命错误: Class 'think\controller' not found 原因:controller首字母要大写 解决:use think\Controller; 问题二:html页面 ...

  9. Python TypeError: not all arguments converted during string formatting ——元组tuple(a)和(a,)的区别

    今天写程序,想输出一个array的shape,原程序为: print('shape of testUImatrix:%s\nStart to make testUImatrix...'%(testui ...

  10. noip2017部分题目

    D1T3 逛公园 题目描述 策策同学特别喜欢逛公园.公园可以看成一张NN个点MM条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,NN号点是公园的出口,每条边有一个非负权值, 代表策策经过 ...