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元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
随机推荐
- AngularJS中实现服务端分页
这个教程将介绍在AngularJS应用中的服务端分页处理.在任何涉及到列表或表格数据的应用中都可能会用到分页. 概念 当我们处理异步分页时,每次只从服务器上获取一页数据.也就是说当用户点击第二页,就只 ...
- Excel中choose函数的使用方法
你还在为Excel中choose函数的使用方法而苦恼吗,今天小编教你Excel中choose函数的使用方法,让你告别Excel中choose函数的使用方法的烦恼. 经验主要从四方面对Excel函数进行 ...
- MSIL实用指南-创建枚举类型
创建枚举类型比较简单,主要使用moduleBuilder.DefineEnum 和enumBuilder.DefineLiteral. 第一步:创建 EnumBuilder 创建 EnumBuilde ...
- Path通过Selenium模拟浏览器抓取，Windows 64解决selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to be in PATH.方法
1.下载geckodriver.exe: 下载地址:https://github.com/mozilla/geckodriver/releases请根据系统版本选择下载:(如Windows 64位系统 ...
- echarts 移动端地图数据可视化教程
如上效果图: 以下未代码: <!doctype html> <html lang="en"> <head> <meta charset ...
- web前端加载优化-减少HTTP请求 （细节与办法）
减少HTTP请求. 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个.a) 合并CSS.JavaScr ...
- SpringMvc的传递参数方式 -- url / requestMapping
在使用spring的项目中,前台传递参数到后台是经常遇到的事, 我们必须熟练掌握一些常用的参数传递方式和注解的使用,废话少说,直接上正文. 1. @requestMapping: 类级别和方法级别的注 ...
- Ubuntu上安装和使用RabbitMQ
1. 安装RabbitMQ服务软件包 输入以下命令进行安装 #apt install rabbitmq-server 2.安装完成后在rabbitMQ中添加用户 命令:#rabbitmqctl add ...
- 压力测试（webbench、ab、siege）
在本地安装webbench,步骤如下: wget http://www.ha97.com/code/webbench-1.5.tar.gz tar zxvf webbench-1.5.tar.gz m ...
- Redis --> 为redis分配新的端口
为redis分配新的端口 为redis分配一个8888端口,操作步骤如下:1.$REDIS_HOME/redis.conf重新复制一份,重命名为redis8888.conf.2.打开redis8888 ...