//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的移动的更多相关文章

  1. IE6/7下空div占用空间的问题

    最近注意力没在前端上面,工作碰到这样一个问题,下意识的写了句 font-size:0;line-height:0;哪知道引发了更大的bug.后来插入数据进去的时候都不显示了..再后来百度一番找到,原来 ...

  2. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  3. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  4. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  5. Div Vertical Menu ver5

    这个小功能,如果是算此次,已经是第5次修改了.可以从这里看到前4次:V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html V ...

  6. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

  7. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  8. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

  9. 如何隐藏DIV对象

    DIV对象在网页里面,相当于一个容器,在其内部,可以显示文字.图片.视频控件等等. 以下的教程,和大家一起来学习,如何隐藏DIV对象. 这必须使用CSS来控制,才能达到隐藏的目的,那么,就得使用CSS ...

  10. css实现div，文字水平居中的方案。

    本文的目的为记录个人开发中常用的几种居中方案,以供大家参考. //basic css html, body { height: 100%; width: 100%; margin: 0; paddin ...

随机推荐

  1. Java开发Linux常用命令

    linux下tomcat服务的相关命令 http://blog.csdn.net/zhangzhikaixinya/article/details/8224307 linux下实时查看tomcat运行 ...

  2. virtualbox下安装的纯净版centOS7，无法访问外网

    virtualbox下安装的纯净版centOS7,网络设置如下: 需要在/etc/sysconfig/network-scripts/下编辑ifcfg-enp0s3,其中,NOBOOT设置成也是,就可 ...

  3. 10-19C#基础--第四部分类型（2）重点

    类型: 一.数字:Math类型 1)Math.Ceiling() ( 表示进位.));//只要小数点后有值,就向前进一位,取上限. string s = Console.ReadLine(); dou ...

  4. 问题：Oracle 树形遍历；结果：使用oracle进行遍历树操作

    使用oracle进行遍历树操作   1:首先数据库中表必须是树形结构的 2:super_department_id 为 department_id 的父节点编号 3:以下语句的执行结果是:depart ...

  5. NSOperation/NSOperationQueue详细使用介绍

      一.简介 (1)是使用GCD实现的一套Objective-C的API (2)是面向对象的线程技术 (3)提供了一些在GCD中不容易实现的特性,如:限制最大并发数量.操作之间的依赖关系   NSOp ...

  6. C语言学习笔记--#error 、 #line 和 #pragma 的使用

    1. #error 的用法 (1)#error 是一种预编译器指示字,用于生成一个编译错误消息 (2)用法:#error message //注意:message 不需要用双引号包围 (3)#erro ...

  7. Android 使用SWIG生成Jni代码<转>

    http://blog.csdn.net/u010780612/article/details/51066819 感觉也就那样把,我没有编译成功,实用性暂时没看到多大优点...

  8. Linux系统的安装（centos的下载地址：http://mirror.symnds.com/distributions/CentOS-vault/6.3/isos/i386/，选择：CentOS-6.3-i386-bin-DVD1.iso 这个下载并进行安装）

    1.首先打开虚拟机: 在上面的那个按钮旁有一个下拉的符号,点开后会看到一个进入固件的按钮,直接点击进去. 便会进入这个界面: 在这个界面其实我们不需要该任何的东西,但是我们需要进入boot界面看一眼, ...

  9. JAVA基础知识总结7（抽象类 | 接口）

    抽象类: abstract 1.抽象:不具体,看不明白.抽象类表象体现. 2.在不断抽取过程中,将共性内容中的方法声明抽取,但是方法不一样,没有抽取,这时抽取到的方法,并不具体,需要被指定关键字abs ...

  10. from xml.etree import cElementTree as ET