[可拖动DIV]刚开通博客顺便就写了点东西!
说说我自己的思路
首先需要一个初始div
div {
border: 1px #333 solid;
width: 200px;
height: 50px;
}
<div id="od">我是一个可拖动div</div>
然后就是鼠标事件,想象一下拖动这个过程需要用到哪些事件。。。
1、鼠标按钮按下事件mousedown
2、鼠标按钮松开事件mouseup
3、鼠标移动事件mousemove
第一步:给div添加鼠标按钮按下事件,这个事件需要完成以下事情
一、获取div到浏览器顶部和左边的距离
二、获取鼠标到浏览器顶部和左边的距离
三、计算出鼠标到div顶部和左边的距离(这里不知道有没有可以直接获取鼠标到div顶部和左边的距离的方法,有兴趣的可以去找一下)
var div_top = $(obj).offset().top;//div距离浏览器顶部的高度
var div_left = $(obj).offset().left;//div距离浏览器左边的高度
var mouse_top = e.clientY;//鼠标距离浏览器顶部的高度
var mouse_left = e.pageX;//鼠标距离浏览器顶部的高度
var mouse_divtop = mouse_top - div_top;//鼠标距离div顶部的高度
var mouse_divleft = mouse_left - div_left;//鼠标距离div左边的高度
四、给Body添加鼠标移动事件(body就是鼠标移动的一个区域,这个可以根据需求做修改),该事件需要完成以下事情
1、隐藏初始div
2、删除新创建的div
3、在body上创建新的div
$("body").bind("mousemove", function (e) {
$("#od").hide();
$(".td").remove();
var html = '<div class="td">' + $("#od").text() + '</div>';
$("body").append(html);
$(".td").css({ "margin-top": e.clientY - mouse_divtop, "margin-left": e.pageX - mouse_divleft });
});
第二步:给Body添加鼠标按钮松开事件,这个事件需要完成以下事情
一、删除Body绑定的鼠标移动事件
二、给新创建的div绑定鼠标按钮按下事件,这个事件要完成的操作就和第一步的第四点一样
$("body").unbind("mousemove");
$(".td").bind("mousedown", function (e) { });
这样就OK了,是不是很简单!也欢迎大家找出不足的地方!这是本人第一次写随笔。不喜勿喷,嘿嘿!
下面贴出全部代码
<!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>
<script src="../js/jquery-1.9.1.min.js"></script>
<style>
div {
border: 1px #333 solid;
width: 200px;
height: 50px;
} .td {
border: 1px #333 solid;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div id="od">我是一个可拖动div</div>
</body>
</html>
<script>
$(document).ready(function () {
$("#od").mousedown(function (e) {
Mousetd(this, e);
});
$("body").mouseup(function () {
$("body").unbind("mousemove");
$(".td").bind("mousedown", function (e) {
Mousetd(this, e);
});
});
function Mousetd(obj, e) {
var div_top = $(obj).offset().top;//div距离浏览器顶部的高度
var div_left = $(obj).offset().left;//div距离浏览器左边的高度
var mouse_top = e.clientY;//鼠标距离浏览器顶部的高度
var mouse_left = e.pageX;//鼠标距离浏览器顶部的高度
var mouse_divtop = mouse_top - div_top;//鼠标距离div顶部的高度
var mouse_divleft = mouse_left - div_left;//鼠标距离div左边的高度
$("body").bind("mousemove", function (e) {
$("#od").hide();
$(".td").remove();
var html = '<div class="td">' + $("#od").text() + '</div>';
$("body").append(html);
$(".td").css({ "margin-top": e.clientY - mouse_divtop, "margin-left": e.pageX - mouse_divleft });
});
}
});
</script>
[可拖动DIV]刚开通博客顺便就写了点东西!的更多相关文章
- 开通博客第一天 写一个hello world
申请的博客第一天便被批准了,有了一个和大家交流学习的园地.在今后的日子里期待一起进步.
- hello word!------为什么开通博客以及自我介绍
来北京已经一年半的日子了,已经完全成功熟练的成为了另一个我,没有了半年前刚来时的那种焦虑.急躁和格格不入. 回想起来那段时间,大概是我人生中非常重要的时期了,去年那个夏天,只身一人背上行囊踏上了北上的 ...
- 开通博客啦 Let‘s Go!
入园两年半,在博客园学到很多知识.得到了很大帮助,今天终于开通博客啦,准备将自己所学到的有用知识分享给大家,共同学习共同进步.
- 我在CSDN开通博客啦!
今天,我最终在CSDN开通博客啦!
- 开通博客第一天,记录此时此刻,开始学习加强c#
从2017年6月毕业到现在,不断的学习.net,在工作中不断的加强技术,终于在此时此刻决定开通博客,记录此后每一天学习的技术点,两年来,每天所涉及的技术点很杂,学了这个忘了那个,总感觉在进步却总是觉得 ...
- 在CSDN开通博客专栏后如何发布文章(图文)
今天打开电脑登上CSDN发现自己授予了专栏勋章,有必要了解如何在专栏发布文章. 很感谢已经有前辈给出了图文教程,此文章转载自博客:http://blog.csdn.net/upi2u/article/ ...
- 使用开源文档工具docsify,用写博客的姿势写文档
前提 下面的简介摘抄自docsify的官网 https://docsify.js.org 中的简介 docsify是一个神奇的文档网站生成器.他可以快速帮你生成文档网站.不同于GitBook.Hexo ...
- 第一次写博客,就写如何向外行介绍自己做的是什么,那个我是做web的
如果想外行问你是做什么的,改如何回答.和内行说java后台就可以了,但外行听不懂,我们该如何描述呢? 我的方法是:我做的是java web开发,不是内外的外,是个英文单词web,全名叫world wi ...
- 第一天开通博客,就粗略写一下刚了解TCP/IP协议工作过程
Tcp/Ip协议分为四层:底层到高层顺序 链路层(硬件,网卡这些) 网络层(选择一条传输路径,如何从一台计算机请求另一条计算机) 传输层(遵循TCP(传输控制协议),UDP(用户数距协议)这些协议) ...
随机推荐
- SQLyog MySQL GUI 11.13 Ultimate 中文破解版【转载】
SQLyog是一个易于使用的.快速而简洁的图形化管理MYSQL数据库的工具,它能够在任何地点有效地管理你的数据库! SQLyog MySQL GUI是我常用的一个桌面工具,功能强大,让你有使用MSSQ ...
- 让DataGridView显示行号
http://www.cnblogs.com/JuneZhang/archive/2011/11/21/2257630.html 为了表示行号,我们可以在DataGridView的RowP ...
- iOS UIView 基本属性用法
.创建UIView UIView * redView = [[UIView alloc] initWithFrame:CGRectMake(, , , )]; UIView * blueView = ...
- android---APN切换
android手机客户端在上传文件时,有时候会一直失败,其可能的原因是APN的设置.wap下的成功率极低,所以在进行文件上传时最好设置下 apn为net形式.下面是我在网上找的一些代码,是由wap转n ...
- win7 cmd命令行窗口 宽度无法变大 自由调整大小
偶然遇到了这个问题,百度查到了解决方案,执行一个bat批处理命令. mode con lines=40 mode con cols=160 color 250 cls @cmd
- Nodejs v4.x.0API文档学习(2)Assert断言测试模块
文档参考地址:https://nodejs.org/dist/latest-v4.x/docs/api/ Assert(断言) assert模块提供了一组简单的断言测试方法,可以拥有测试不变量.该模块 ...
- java算法小知识练习
偶尔翻开了以前的练习题,不自觉又想随手敲一遍,虽然有些思想依然是那么老套,但毕竟也算是对知识的巩固 了. 一.题目:有1.2.3.4四个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 具体 ...
- JavaScript知识点回顾
一 浏览器对象树 window:处于对象树中的最高层,表示一个浏览器窗口,由于唯一,可以省略不写.(window.document 等价 document) Forms.Images.Links ...
- java poi出excel换行问题
POI操作excel实现换行问题. package jp.co.misumi.mdm.batch.common.jobrunner; import java.io.FileInputStream; i ...
- C# String 前面不足位数补零的方法 PadLeft
PadLeft(int totalWidth, char paddingChar) //在字符串左边用 paddingChar 补足 totalWidth 长度PadLeft(int totalWid ...