实现dom元素拖动
本文主要写一下如何实现dom元素拖动,目前使用jquery库实现之。
主要的注释附在代码中,大家可以根据代码画一个小的窗口模型图,以便于理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现dom元素拖动</title>
<style>
.dialog {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 400px;
background-color: blue;
}
</style>
<script src="js/jquery-1.7.2.js"></script>
</head>
<body>
<div class="dialog dialog-drag">拖动</div>
<script>
(function($) {
var windowWidth,
windowHeight,
mouseToDialogX,
mouseToDialogY,
dialogWidth,
dialogHeight;
var $target,
$doc = $(document);
var _move = function(e) {
var nowTop,
nowLeft,
pageX = e.pageX,
pageY = e.pageY;
// top
// 界限值:当对话框拖动到上边界时,将top置为0
if (pageY - mouseToDialogY < 0) {
nowTop = 0;
}
// 界限值:当对话框拖动到下边界时,将top置为(窗口高度-对画框高度),即将对话框底部与页面平齐
else if (dialogHeight + (pageY - mouseToDialogY) > windowHeight) {
nowTop = windowHeight - dialogHeight;
}
// 正常值:鼠标纵向坐标-鼠标纵向坐标与对话框上边缘的距离
else {
nowTop = pageY - mouseToDialogY;
}
// left - 解释同上
if (pageX - mouseToDialogX < 0) {
nowLeft = 0;
} else if (dialogWidth + (pageX - mouseToDialogX) > windowWidth) {
nowLeft = windowWidth - dialogWidth;
} else {
nowLeft = pageX - mouseToDialogX;
}
$target.css({
left: nowLeft,
top: nowTop
});
};
// 拖动开始
$doc.on('mousedown', '.dialog-drag', function (e) {
var $this = $(this),
$win = $(window);
$target = $this;
windowWidth = $win.width();
windowHeight = $win.height();
mouseToDialogX = e.pageX - $this.offset().left;
mouseToDialogY = e.pageY - $this.offset().top;
dialogWidth = $this.width();
dialogHeight = $this.height();
// 只有对话框拖动时,才会有mousemove事件
$(document).on('mousemove', _move);
});
// 拖动结束
$doc.on('mouseup', '.dialog-drag', function (e) {
$target = null;
// 当拖动结束时, 解绑mousemove事件
$(document).off('mousemove', _move);
});
})(jQuery); </script>
</body>
</html>
实现dom元素拖动的更多相关文章
- 设置dom元素可拖动,支持ie5+
摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Fi ...
- 关于Cefsharp无法拖动Dom元素的解决方法
如图所显示,Cefsharp在嵌入网页,页面有对Dom元素的拖动的操作,独立在浏览器上对网页元素的拖动是没有问题的,但是嵌入到Cefsharp上显示禁用的图标.排查了H5的代码,没有写入禁用拖动的操作 ...
- 判断DOM元素是否出现再浏览器窗口中
几乎所有的项目都要解决这样一个问题:判断一个元素是否出现在浏览器窗口中?因为通过它我们可以极大的优化项目的性能,进而提升用户的的体验.原生javasxript获取浏览器的滚动距离和可视窗口的高度 使用 ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- JQuery利用sort对DOM元素进行排序
前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...
- html标签属性(attribute)和dom元素的属性(property)
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- 如何隐藏DOM元素
在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...
- HTML DOM元素的Dragdrop
在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...
随机推荐
- java中获取本地文件的编码
import java.util.*; public class ScannerDemo { public static void main(String[] args) { System.out.p ...
- 51NOD 1400 序列分解
传送门:1400 序列分解序列分解 基准时间限制:1s 空间限制:131072 KBKB131072 KB 1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题1 秒 空间限制:13 ...
- Python input()和raw_input()的区别
当输入为数字的时候,input()获得的是数字,而后者获得的是str,可以用int(raw_input())来转换. i = input() print i+1 j = raw_input() pri ...
- 一个完整的编译器前端-A.1 源语言
这个语言的一个程序由一个块组成,该块中包含可选的声明和语句.语法符号basic表示基本类型. program –> block block –> { decls stmts } dec ...
- 分子量 (Molar Mass,ACM/ICPC Seoul 2007,UVa 1586)
解题思路: 1.将分子量用double 数组记录下来 2.将字符串存储在字符数组中,从头向后扫描,一直记住“字母”,对下一个字符进行判断,是否是数字,如果是数字:用一个整数记录,本代码中用的sum,同 ...
- Memcache的部署和使用(转)
一.memcache简介 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. Mem ...
- 基于.NET的大型Web站点StackOverflow架构分析(转)
Stack Overflow网址:http://stackoverflow.com/ 当前访问量:每月9500PV(每天300多万PV) 当前Alexa排名:149 所用.NET技术:C#.Visua ...
- juery动态添加和删除
拼语句添加框(不能删除原有的tr) //点击a标签 $("#a").on("click",function(){ var $newtr = $("&l ...
- 新浪微博客户端(3)-封装UIBarButtonItem
单独给NavigationBar上的两个NavigationItem设置图片显得比较麻烦,下面对创建单个UIBarButtonItem的过程进行封装. UIBarButtonItem+Extensio ...
- 修改shell 将当前shell(默认是bash B SHELL )改为csh C SHELL
在修改当前shell时,用命令: usermod -s /bin/csh home home 为 你所想要改变的用户地址 此处home 为家目录,一般自己创建的用户都会在家目录 ...