jquery实现对div的拖拽功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖动DIV</title>
<style type="text/css">
#show1 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
border: 1px solid black;
}
#show2 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 100px;
top: 0px;
border: 1px solid black;
}
#show3 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 200px;
top: 0px;
border: 1px solid black;
}
#show4 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 0px;
top: 100px;
border: 1px solid black;
}
#show5 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 100px;
top: 100px;
border: 1px solid black;
}
#show6 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 200px;
top: 100px;
border: 1px solid black;
}
#show7 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 0px;
top: 200px;
border: 1px solid black;
}
#show8 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 100px;
top: 200px;
border: 1px solid black;
}
#show9 {
background: #7cd2f8;
width: 100px;
height: 100px;
text-align: center;
position: absolute;
z-index: 1;
left: 200px;
top: 200px;
border: 1px solid black;
}
#right{
width: 306px;
height: 306px;
position: absolute;
top: 0px;
left: 400px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="gongju/jquery-1.11.2.min.js"></script> </head>
<body>
<div class="show" id="show1" bs="1">
1
</div>
<div class="show" id="show2" bs="2">
2
</div>
<div class="show" id="show3" bs="3">
3
</div>
<div class="show" id="show4" bs="4">
4
</div>
<div class="show" id="show5" bs="5">
5
</div>
<div class="show" id="show6" bs="6">
6
</div>
<div class="show" id="show7" bs="7">
7
</div>
<div class="show" id="show8" bs="8">
8
</div>
<div class="show" id="show9" bs="9">
9
</div>
<!----------------------------------------------->
<div id="right"> </div>
</body>
</html>
<script type="text/javascript">
var biao;
$(document).ready(function() {
$(".show").mousedown(function(e) //e鼠标事件
{
biao=$(this).attr("bs");
$(this).css("cursor", "move"); //改变鼠标指针的形状 var offset = $(this).offset(); //DIV在页面的位置
var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove", function(ev) //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
$("#show"+biao+"").stop(); //加上这个之后 var _x = ev.pageX - x; //获得X轴方向移动的值
var _y = ev.pageY - y; //获得Y轴方向移动的值 $("#show"+biao+"").animate({
left: _x + "px",
top: _y + "px"
}, 10);
}); }); $(document).mouseup(function() {
$("#show"+biao+"").css("cursor", "default");
$(this).unbind("mousemove");
})
})
</script>
jquery实现对div的拖拽功能的更多相关文章
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- JS实现多Div模块拖拽功能
空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...
- 使用jQuery Draggable和Droppable实现拖拽功能
上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素. ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- DIV 实现可拖拽 功能（留档）
//可拖拽 功能 $.fn.extend({ //用法:$(element).jqDrag(); //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果 ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
随机推荐
- linux 记录用户操作日志
将以下加入到/etc/profile 最后 history USER_IP=`who -u am i 2>/dev/null| awk '{print $NF}'|sed -e 's/[()]/ ...
- 初步谈谈 C# 多线程、异步编程与并发服务器
多线程与异步编程可以达到避免调用线程异步阻塞作用,但是两者还是有点不同. 多线程与异步编程的异同: 1.线程是cpu 调度资源和分配的基本单位,本质上是进程中的一段并发执行的代码. 2.线程编程的思维 ...
- centos7 升级 git(2.14.3) 版本
下载 wget https://www.kernel.org/pub/software/scm/git/git-2.14.3.tar.gz 安装依赖包 yum install curl-devel ...
- .Net Core 2.0+ InfluxDB+Grafana+App Metrics 实现跨平台的实时性能监控
最近这段时间一直在忙,没时间写博客,负责了一个项目,从前端到后端一直忙,同时还有其他第几个项目的系统架构要处理. 去年就开始关注net core了,只是平时写写demo,没用在项目中,正好这次机会就用 ...
- console.log(0.2+0.4===0.6)// true or false??
在正常的数学逻辑思维中,0.2+0.4===0.6这个逻辑是正确的,但是在JavaScript中0.2+0.4!==0.6这是为什么呢?这个问题也会偶尔被用来当做面试题来考查面试者对 JavaScri ...
- Jdk1.7+eclipse搭建Java开发环境
Jdk1.7+eclipse搭建Java开发环境 1. 下载jdk1.7 http://www.oracle.com/technetwork/java/javase/downloads/jdk7 ...
- 最小生成数（并查集）Kruskal算法
并查集:使用并查集可以把每个连通分量看作一个集合,该集合包含连通分量的所有点.这两两连通而具体的连通方式无关紧要,就好比集合中的元素没有先后顺序之分,只有属于和不属于的区别.#define N 100 ...
- 去除Vue在WebStorm中报命名空间的错误
Preferences -> Editor -> Inspections找到XML,把 Unbound XML namespace prefix的勾去掉
- 【JS】 Javascript与HTML DOM的互动 寻路
JS HTML DOM DOM的全程是Document Object Module,即文档对象模型.一般来说,当一个页面被加载时,浏览器会在内部创建一个当前文档的DOM.就像用python的Etree ...
- Linux下ping，telnet，ssh命令的比较
ping工作在OSI模型的第三层,网络层. 主要用于测试到达目的主机的网络是否连接,不能检测某个端口是否开放. ping使用ICMP协议,不使用某个特定端口. 也可以 ping 域名 ,这样可以直接看 ...