Div的移动
//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>无标题文档</title>
<style>
#Dialog {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
DivertDialog($('#Dialog'));
});
var DivertDialog = function (obj) {
var offsetX = obj.offset().left;
var offsetY = obj.offset().top;
obj.mousedown(function () {
obj.css('cursor', 'move');
bool = true;
var offsetX = event.offsetX;
var offsetY = event.offsetY;
obj.bind("mousemove", function () {
if (bool) {
var x = event.clientX - offsetX;
var y = event.clientY - offsetY;
obj.css('left', x);
obj.css('top', y);
}
});
}).mouseup(function () {
obj.css('cursor', 'default');
obj.unbind("mousemove");
});
};
</script>
</head>
<body>
<div id="Dialog" style="float:left">拖拽层</div>
</body>
</html>
//JQuery 拖拽DIV，相当于重新复制了一个，原来的DIV不动，而对clone的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>无标题文档</title>
<style>
#Drigging1 {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
#Drigging2 {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
left: 16px;
top: 105px;
}
</style>
<script src="Jquery-1-5-2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var cloneDiv="";
var bool=false; //标识是否移动元素
var offsetX=0; //声明DIV在当前窗口的Left值
var offsetY=0; //声明DIV在当前窗口的Top值
function clones()
{
cloneDiv = $("#Drigging").clone(true).appendTo("body");
}
$("#Drigging div").mouseover(function(){
$(this).css('cursor','move');//当鼠标移动到拖拽的DIV上的时候，将鼠标的样式设置为移动(move)
})
$("#Drigging div").mousedown(function(){
bool=true; //当鼠标在移动元素按下的时候将bool设定为true
offsetX = event.offsetX;//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX
offsetY = event.offsetY; //获取鼠在当前窗口的相对偏移位置的Top值并赋值给offsetY
$(this).css('cursor','move');
if($(this).attr("class") == "clones")
{
cloneDiv = $(this);
}else
{
cloneDiv = $(this).clone(true).addClass("clones").appendTo("body");
}
//setTimeout("clones()",1000);
}).mouseup(function(){
bool=false;////当鼠标在移动元素起来的时候将bool设定为false
})
$(document).mousemove(function(){
if(!bool)//如果bool为false则返回
return;
//当bool为true的时候执行下面的代码
var x = event.clientX-offsetX; //event.clientX得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的X值（减去鼠标刚开始拖动的时候在当前窗口的偏移X）
var y = event.clientY-offsetY; //event.clientY得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值（减去鼠标刚开始拖动的时候在当前窗口的偏移Y）
cloneDiv.css({left:x,top:y});
//$("#Drigging").css("left", x);
// $("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
})
})
</script>
</head>
<body>
<div id="Drigging">
<div id="Drigging1" style="float:left">拖拽层</div>
<div id="Drigging2" style="float:left">拖拽层1</div>
</div>
</body>
</html>
Div的移动的更多相关文章
- IE6/7下空div占用空间的问题
最近注意力没在前端上面,工作碰到这样一个问题,下意识的写了句 font-size:0;line-height:0;哪知道引发了更大的bug.后来插入数据进去的时候都不显示了..再后来百度一番找到,原来 ...
- div实现自适应高度的textarea，实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- 冒泡，setinterval，背景图的div绑定事件，匿名函数问题
1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...
- css居中div的几种常用方法
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...
- Div Vertical Menu ver5
这个小功能,如果是算此次,已经是第5次修改了.可以从这里看到前4次:V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html V ...
- 计算Div标签内Checkbox个数或已被disabled的个数
先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...
- [jquery]显示隐藏div标签的几种方法
1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...
- CSS3变形记(上)：千变万化的Div
传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...
- 如何隐藏DIV对象
DIV对象在网页里面,相当于一个容器,在其内部,可以显示文字.图片.视频控件等等. 以下的教程,和大家一起来学习,如何隐藏DIV对象. 这必须使用CSS来控制,才能达到隐藏的目的,那么,就得使用CSS ...
- css实现div，文字水平居中的方案。
本文的目的为记录个人开发中常用的几种居中方案,以供大家参考. //basic css html, body { height: 100%; width: 100%; margin: 0; paddin ...
随机推荐
- CSS-MUI：笔记-01
ylbtech-CSS-MUI:笔记 1. mui-navbar 导航条返回顶部 1.1.样式一 1.2. <div class="mui-navbar-inner mui-bar ...
- 数据库：ubantu下MySQL数据库备份方法
1.编辑/etc/crontab文件设定定时任务,在制定时间执行backup_databases.sh vi /etc/crontab # /etc/crontab: system-wide cron ...
- IC卡和RFID卡的区别（网上说的都不准确）
其实IC卡是卡类型的称呼,IC卡和RFID卡不应该在一起对比的,和IC卡在一起对比的应该是ID卡. RFID卡是其实是对卡技术类型称呼. IC为卡类型称呼(Integrated Circuit Car ...
- Python数据库(一)-Mysql数据库的连接
首先需要安装pymysql模块 然后用pymysql连接mysql并执行命令来查看数据 连接mysql数据库后需要创建游标来执行SQL语句 # -*- coding:utf-8 -*- __autho ...
- rsync 简单使用 非默认ssh端口 分别从远程获取及推送本地的文件到远程
rsync: did not see server greetingrsync error: error starting client-server protocol (code 5) at mai ...
- 3.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：
转自:https://www.cnblogs.com/ssslinppp/p/4528892.html 概述 在文章:<[Spring学习笔记-MVC-3]SpringMVC返回Json数据-方 ...
- 【转】Android下面打印进程函数调用堆栈(dump backtrace)的方法
1. 为什么要打印函数调用堆栈? 打印调用堆栈可以直接把问题发生时的函数调用关系打出来,非常有利于理解函数调用关系.比如函数A可能被B/C/D调用,如果只看代码,B/C/D谁调用A都有可能,如果打印出 ...
- 使用线程池优化Echo模型
在上一篇文章中 http://www.cnblogs.com/gosaint/p/8492356.html 我阐述了使用线程为每一个客户端创建一个工作线程来负责任务的执行.但是会存在如 ...
- Android getWidth和getMeasuredWidth的区别
getWidth 得到的事某个View的实际尺寸. getMeasuredWidth 得到的是某个View想要在parent view里面占的大小 相比你也见过这样的解释,听起来这样的解释也是云里雾里 ...
- [cf557d]Vitaly and Cycle(黑白染色求奇环)
题目大意:给出一个 n 点 m 边的图,问最少加多少边使其能够存在奇环,加最少边的情况数有多少种. 解题关键:黑白染色求奇环,利用数量分析求解. 奇环:含有奇数个点的环. 二分图不存在奇环.反之亦成立 ...