本文主要写一下如何实现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元素拖动的更多相关文章

  1. 设置dom元素可拖动,支持ie5+

    摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Fi ...

  2. 关于Cefsharp无法拖动Dom元素的解决方法

    如图所显示,Cefsharp在嵌入网页,页面有对Dom元素的拖动的操作,独立在浏览器上对网页元素的拖动是没有问题的,但是嵌入到Cefsharp上显示禁用的图标.排查了H5的代码,没有写入禁用拖动的操作 ...

  3. 判断DOM元素是否出现再浏览器窗口中

    几乎所有的项目都要解决这样一个问题:判断一个元素是否出现在浏览器窗口中?因为通过它我们可以极大的优化项目的性能,进而提升用户的的体验.原生javasxript获取浏览器的滚动距离和可视窗口的高度 使用 ...

  4. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  5. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  6. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  7. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  8. 如何隐藏DOM元素

    在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...

  9. HTML DOM元素的Dragdrop

    在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...

随机推荐

  1. SPOJ Play on Words

    传送门 WORDS1 - Play on Words #graph-theory #euler-circuit Some of the secret doors contain a very inte ...

  2. 代码注册广播接收者&利用广播调用服务的方法服务声命周期(混合开启)

    1)说明文档: 2)效果演示: 3)代码演示:

  3. The mean shift clustering algorithm

    The mean shift clustering algorithm MEAN SHIFT CLUSTERING Mean shift clustering is a general non-par ...

  4. 转载大神的检测网站重定向的python脚本

    #!/usr/bin/env python #coding=utf8 import sys import requests def check_for_redirects(url): try: r = ...

  5. httpModules与httpHandlers之httpModules(转载)

    WapModule.cs:public class WapModule:IHttpModule{ public void Init(HttpApplication context)        {  ...

  6. C#验证是否是真的图片格式

    做图片上传功能时,我们要限制用户上传的图片格式和大小. 但是,还有一种情况就是验证用户伪造的符合要求的图片,这种情况就必须要验证文件的真正格式. C#的办法时可以通过将文件读成二进制流,取前两个字节判 ...

  7. 修改linux最大文件句柄数

    大家知道在linux服务器大并发调优时,往往需要预先调优linux参数,其中修改linux最大文件句柄数是最常修改的参数之一. 在linux中执行ulimit -a 即可查询linux相关的参数,如下 ...

  8. 一种 Visual Studio 不能单步调试(函数调用)问题

    Visual Studio每次出"莫名其妙的问题"的时候都非常棘手.这次遇到这么一个问题: 新建的Windows的控制台窗口程序(C++),编译链接运行没有问题.但是想单步调试一下 ...

  9. HNU 12817 Shipura(表达式求值)

    题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12817 解题报告:定义两种运算符号,一种是>>,就 ...

  10. ios中的category与extension

    http://blog.csdn.net/haishu_zheng/article/details/12873151   category和extension用来做类扩展的,可以对现有类扩展功能或者修 ...