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元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
随机推荐
- MySQL Connector 卸载
MySQL Connector 安装的时候有时候会遇到很多问题,有时候会卸载失败,导致无法重新安装.测试了网上各种办法,删文件,删注册表,重启,360强行删除都不是很有效.最后发现msizap比较有效 ...
- MSIL实用指南-创建方法和定义参数
本篇讲解实现创建方法.指定参数的名称.实现参数加out和ref修饰符.以及参数加默认值. 创建方法 创建方法用类TypeAttributes的 DefineMethod(string name, Me ...
- 11 个简单的 Java 性能调优技巧
大多数开发人员理所当然地以为性能优化很复杂,需要大量的经验和知识.好吧,不能说这是完全错误的.优化应用程序以获得最佳性能不是一件容易的事情.但是,这并不意味着如果你不具备这些知识,就不能做任何事情.这 ...
- 强大核心功能矩阵，详解腾讯云负载均衡CLB高可靠高性能背后架构
1 前言 腾讯云负载均衡(Cloud LoadBalancer),简称CLB, 负载均衡通过设置虚拟服务地址(VIP)将来自客户端的请求按照指定方式分发到其关联的多台后端云服务器,服务器将请求的响应返 ...
- Filecoin2017年Q4进度更新(完整版)
亲爱的Filecoin支持者.矿工.用户.投资者和广大的社区朋友们, 自从Token销售完成以后,我们便开始集中精力把Filecoin项目从设想变为现实-从实现Filecoin协议的核心代码到打造我们 ...
- String类详解
看了很多文章事实证明之前的通过new创建String对象只有一个是错误的,实际上创建一个或者创建两个对象,一个在堆区,一个在常量池,当常量池中已经存在就不会创建.看了一篇非常好的文章http://ww ...
- Linux基础命令详解
1 遍历目录 cd:change dicrectory的缩写 .或者./代表当前目录,..或../代表上一级目录,cd -代表进入上一次的目录. 2 文件和目录列表 ls:list的缩写,会显示目录下 ...
- 很全的atom问题解决方案
atom插件 http://blog.csdn.net/qq_30100043/article/details/53558381 atom社区 https://atom-china.org/
- 警示：AL32UTF8字符集不是ZHS16GBK字符集的超集
今天有一个客户向我咨询:数据库由ZHS16GBK字符集修改为AL32UTF8字符集,发现中文的数据中小部分出现乱码,客户认为AL32UTF8明明可以支持更多的文字,不应该出现这样的情况才对. 从现象看 ...
- 源码实现 --> strrev
字符串的顺序反序 函数 char *strrev(char *string); 将字符串string中的字符顺序颠倒过来. NULL结束符位置不变. 返回调整后的字符串的指针. 源码 //其基于的思想 ...