//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-API-Package：org.springframework.beans.factory.annotation

    ylbtech-Java-API-Package:org.springframework.beans.factory.annotation 1.返回顶部 1. @NonNullApi @NonNull ...

  2. 0ctf签到题

    签到题: 题目提示: flag在IRC聊天室里 开启weechat ┌─[root@sch01ar]─[~] └──╼ #weechat 创建服务器 /server add freenode8001 ...

  3. 2015.3.11 VS异步控件及进度条结合应用

    1.在Form中添加 指针控件:BackgroundWorker-bgwork:进度条控件progressBar1 以及开始.取消按钮 2.开始按钮启动异步线程 private void button ...

  4. C#实现有向无环图(DAG)拓扑排序

    对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边(u,v)∈E(G),则u在线性序列中出现在 ...

  5. [Python Study Notes]双层柱状图绘制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  6. css代码结构

    整个文档结构如下: 一般性样式 主体样式 reset样式 链接 标题 其他元素 辅助样式 表单 通知和错误 一致的条目 页面结构 标题.页脚和导航 布局 其他页面结构元素 页面组件 各个页面 覆盖

  7. Python 网络爬虫 002 (入门) 爬取一个网站之前，要了解的知识

    网站站点的背景调研 1. 检查 robots.txt 网站都会定义robots.txt 文件,这个文件就是给 网络爬虫 来了解爬取该网站时存在哪些限制.当然了,这个限制仅仅只是一个建议,你可以遵守,也 ...

  8. (转)C++中使用C代码

    昨晚看书的时候碰到一个问题,在C++中如何调用C代码...于是查了一下资料...发现了一个大神写的文章挺好的. -------------------------------------------- ...

  9. 101334E Exploring Pyramids

    传送门 题目大意 看样例,懂题意 分析 实际就是个区间dp,我开始居然不会...详见代码(代码用的记忆化搜索) 代码 #include<iostream> #include<cstd ...

  10. Luogu 2151 [SDOI2009]HH去散步

    BZOJ 1875 矩阵乘法加速递推. 如果不要求不能走同一条边,那么直接构造出矩阵快速幂即可,但是不走相同的道路,怎么办? 发现边数$m$也很小,我们直接把$2 * m$开成一个矩阵,相当于记录上一 ...