鼠标事件

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. 网络浅析(<<网络是怎么连接的>> 总结)

    概要 基本概念 网线 集线器 交换机 路由器 路由器和交换机 路由器和集线器 接入网 IP DNS 以太网 协议栈 网络连接过程 通信过程(浏览器 -> 服务器) 客户端和服务端 服务端的套接字 ...

  2. Webstorm 2017.3激活破解

    之前尝试过各种激活破解办法,不过随着版本的不断升级,激活信息都失效了(毕竟咱不是通过正常途径激活的),只能重新激活.而且难度越来越大,记得早先网上有人分享激活码,激活的server地址,破解程序等等, ...

  3. Codeception 实战

    Codeception 测试 Php 代码 一.一句话概述 使用 cc 进行单元测试,保证现有代码质量,为以后维护与重构提供支撑. 二.目标 安装配置 cc 编写测试代码,简化开发与最大化稳定性和可维 ...

  4. html&css学习笔记----YJZJZQA

    HTML表单: (

  5. PLSQL Developer图形化界面新建用户并授权并导入脚本

    最近用了PLSQL Developer第三方的软件.记录一下实现新建用户并授权并导入脚本的功能. 第一步.切换sys用户(如果此处方法已经掌握,直接切换sys即可,就不用看这一步了) 首先检查当前登录 ...

  6. python官网几个下载文件的区别

    进入python官方,下载python编译器,提供了如下几个版本进行选择,这些版本分别是什么意思呢? Python 3.7.1 - 2018-10-20 Download Windows x86 we ...

  7. numpy科学计算库的基础用法，完美抽象多维数组(原创)

    #起别名避免重名 import numpy as np #小技巧:print从外往内看==shape从左往右看 if __name__ == "__main__": print(' ...

  8. Aninteresting game HDU - 5975 （数学+lowbit）

    Let’s play a game.We add numbers 1,2...n in increasing order from 1 and put them into some sets. Whe ...

  9. flutter 自定义主题切换

    1. 定义local_srorage.dart文件 使用Flutter第三方插件shared_preferences实现存储键值对信息 相关shared_preferences插件可参考: flutt ...

  10. h5手机查看

    1.装个node:2.全局装个anywhere的npm包.(npm i -g anywhere)3.大功告成,现在到任意目录下用命令行执行anywhere就可以:(-p 参数可以设置启动端口) 补充: ...