2011-05-12 10:10 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">
.show{
background:#7cd2f8;
width:100px;
height:100px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
} </style>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript"><!--
$(document).ready(function()
{
$(".show").mousedown(function(e)//e鼠标事件
{
$(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").stop();//加上这个之后 var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值 $(".show").animate({left:_x+"px",top:_y+"px"},10);
}); }); $(document).mouseup(function()
{
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})
}) // --></script>
</head>
<body>
<div class="show">
jquery实现DIV层拖动
</div>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
$(document).ready(function(){
$("#bu").click(function(){
createDiv("hid", "dogdog");
});
});
function createDiv(id, label, left, top)
{
$("body").append($("<div style=''>我是可以拖动的</div>").attr("id", id).text(label));
$("#" + id).css({"background":"red", "position":"absolute", "width":"880", "height":"120"});
$("#hid").mousedown(function(event){
var offset=$("#hid").offset();
x1=event.clientX-offset.left;
y1=event.clientY-offset.top;
$("#hid").mousemove(function(event){
$("#hid").css("left",(event.clientX-x1)+"px");
$("#hid").css("top",(event.clientY-y1)+"px");
});
$("#hid").mouseup(function(event){
$("#hid").unbind("mousemove");
});
});
}
</script>
</head>
<body>
<input type=button value="点我显示div" id="bu">
</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. 深入理解最强桌面地图控件GMAP.NET ---[更新]百度地图

    之前写了篇博文,深入理解最强桌面地图控件GMAP.NET --- 百度地图 但是很多回复说百度地图更新了,不能显示百度的离线地图.之前承诺说是国庆节更新,最近才更新.代码已经提交到: https:// ...

  2. 折腾了两天的跨站脚本提交问题,与IIS7有关

    根据这里提供的方法,本地测试通过没有问题,但是部署到服务器上之后,只有GET请求可以跨站提交,POST请求继续报错,折腾了两天之后觉得,是不是IIS7的问题?果然,找到了这篇文章,照做之后解决.

  3. 谷歌三大核心技术(一)Google File System中文版

    http://www.open-open.com/lib/view/open1328763454608.html

  4. js 日期加一天或者减一天,最简单方法

    通过计算一天的时间戳是多少进行换算:(new Date(new Date().getTime()-86400000)).Format("yyyy-MM-dd hh:mm:ss")

  5. C#多线程学习(四) 多线程的自动管理(线程池)

    在多线程的程序中,经常会出现两种情况: 一种情况:   应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应                   这一般使用ThreadPo ...

  6. Spring Boot - Spring Scheduling

    有时应用需要定时(如凌晨)执行一些任务(比如计算一些数据并存下来留给后续使用) 使用 使用@EnableScheduling注解启用Scheduling功能:不一定要标注在启动类上,也可以标注在@Co ...

  7. 使用Telegraf + Influxdb + Grafana 监控SQLserver服务器的运行状况

    使用Telegraf + Influxdb + Grafana 监控SQLserver服务器的运行状况 前言 本文在Debian9下采用Docker的方式安装Telegraf + Influxdb + ...

  8. jquery函数封装

    <script type="text/javascript"> $(function () { $("#tabMenu a").on('click' ...

  9. 参照跟老男孩学linux运维搭建nagios实验小结

        nagios效果示例 http://192.168.0.236/nagios       用户名:hong     密码:123   一. 服务端安装准备   1. 更新源 cd /etc/y ...

  10. Postman使用手册4——API test

    一.Pre Request Scripts Postman v0.10+ 版本支持pre-request scripts. prerequest script.png pre-request scri ...