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元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
随机推荐
- 用Canvas生成随机验证码(后端前端都可以)
一 .使用前端生成验证码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- VS 2017 开发安卓环境搭建 问题总结
VS 2017可以开发安卓啦,之前一直想尝试开发安卓,但是由于时间忙, Java只学了个基础,不如C#熟练所以一直没有机会接触安卓开发.既然需要利用VS2017开发安卓,那么第一步就是了解VS2017 ...
- Http最常见的错误代码
1XX 表示消息 2XX 表示成功 3XX 表示重定向 4XX 表示请求错误 5XX 表示服务器端错误 我们最常见的就是: 404(页面找不到),这个错误代码是由于我们输入的网址不对造成的,浏览器找不 ...
- CI框架传递数组到view层问题记录
给大家分享一下在做页面显示天气预报功能中遇到的问题和解决方法!! 项目开发中,我用的天气预报API是心知天气的免费接口.关于天气预报接口,可用的有很多,看需求怎么要求了!有兴趣的小伙伴可以链接到这个地 ...
- Linux使用ssh公钥实现免批量分发管理服务器
ssh 无密码登录要使用公钥与私钥.linux下可以用用ssh-keygen生成公钥/私钥对,下面我以CentOS为例. 管理机器外网IP10.0.0.61(内网172.16.1.61) 服务器外网1 ...
- 笔记：Hibernate SQL 查询
Hibernate 支持使用原生的SQL查询,使用原生SQL查询可以利用某些数据库特性,原生SQL查询也支持将SQL语句放在配置文件中配置,从而提高程序的解耦,命名SQL查询还可以用于调用存储过程. ...
- 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面
一.创建脚本工具并执行初始迁移 在本节中,您将使用包管理控制台(PMC)来更新数据库: •添加VisualStudio Web代码生成包.这个包是运行脚本引擎所必需的. • 执行Add-Migrati ...
- Java过滤器Filter使用详解
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6374212.html 在我的项目中有具体应用:https://github.com/ygj0930/Coupl ...
- USACO Humble Numbers
USACO Humble Numbers 这题主要是两种做法,第一种是比较常(jian)规(dan)的-------------用pq(priority_queue)维护,每次取堆中最小值(小根堆) ...
- 导入TensorFlow报错
C:\....\Anaconda3\envs\py35\lib\site-packages\h5py\__init__.py:36: FutureWarning: Conversion of the ...