DIV 实现可拖拽 功能(留档)
//可拖拽 功能
$.fn.extend({
//用法:$(element).jqDrag();
//element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果
jqDrag: function () {
var _drag = false, _self, _x, _y, cw, ch, sw, sh, dragBar, DragCnt,
vxw = window, vxd = document, vxe = vxd.documentElement, vxg = vxd.getElementsByTagName('body')[0],
//dragContent = (typeof dragContent == "undefined") ? dragControl : dragContent;
_self = this;
DragCnt = $(_self);
DragBar = $(".dragbar", DragCnt);
DragBar.mouseup(function (e) {
_drag = false;
document.body.releaseCapture && this.releaseCapture();;
}).mousedown(function (e) {
_drag = true;
_x = e.pageX - parseInt(DragCnt.css("left"));
_y = e.pageY - parseInt(DragCnt.css("top"));
winW = vxw.innerWidth || vxe.clientWidth || vxg.clientWidth;
winH = vxw.innerHeight || vxe.clientHeight || vxg.clientHeight;
cw = winW;
ch = winH;
sw = parseInt(DragCnt.outerWidth());
sh = parseInt(DragCnt.outerHeight());
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
document.body.setCapture && this.setCapture();
$(document).mousemove(function (e) {
DragCnt.attr("posit", _x + "" + e.pageX);
if (_drag) {
var x = e.pageX - _x;
var y = e.pageY - _y;
x = x < 0 ? x = 0 : x < (cw - sw) ? x : (cw - sw);
y = y < 0 ? y = 0 : y < (ch - sh) ? y : (ch - sh);
DragCnt.css({ top: y, left: x });
DragCnt.attr("posit", x + "_" + y);
}
});
});
}
});
DIV 实现可拖拽 功能(留档)的更多相关文章
- 多个div实现随意拖拽功能
鼠标事件 mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute.切记不可使用margin-top:10px;而应该使用top:10p ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- js实现登陆页面的拖拽功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...
- React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
随机推荐
- PHP 18:data_valid_fns.php 看正则表达式
原文:PHP 18:data_valid_fns.php 看正则表达式 本章介绍正则表达式.先看看data_valid_fns.php的代码吧. 简要介绍一下.fill ...
- 基于4.5Framework web程序、SQLSERVER数据库打包
原文:基于4.5Framework web程序.SQLSERVER数据库打包 估计很多朋友和我一样,对于C/S程序打包很熟悉,但对于B/S程序打包一头雾水... 最近公司要求我们把项目和数据库(SQL ...
- openwrt的GPIO控制
为什么有些GPIO可以在/sys/class/gpio中控制,而有些不行呢? 先来看一看普通不需要C程序而是使用脚本的控制方法(Linux普遍适用): First step is making GPI ...
- ASP.NET WebForm路由模拟
一.ASP.NET MVC 路由(一)--- ASP.NET WebForm路由模拟 2014-11-08 11:49 by 郝喜路, 232 阅读, 0 评论, 收藏, 编辑 ASP.NET Web ...
- Mysql高级之索引
原文:Mysql高级之索引 索引:是针对数据所建立的目录. 作用: 可以加快查询速度 负面影响: 降低了增删改的速度. 索引的创建原则: 1:不要过度索引 2:在where条件最频繁的列上加.在重复度 ...
- android 布局属性大全---初学者必备
Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料,花费本人一个下午搞出来的,希望对其他人有用. 第一类:属性值为true或false android: ...
- 使用response实现文件下载功能
response.setContentType("text/html;charset=utf-8"); response.setCharacterEncoding("u ...
- C#中一些易混淆概念总结
C#中一些易混淆概念 这几天一直在复习C#基础知识,过程中也发现了自己以前理解不清楚和混淆的概念.现在给大家分享出来我的笔记: 一,.NET平台的重要组成部分都是有哪些 1)FCL (所谓的.NET框 ...
- Fiddler工具
Fiddler初探 我们知道监视Http和Https请求的工具有多种,例如:HttpWatch,FireBug等.但是今天接触到一种新的工具Fiddler.Fiddler能记录所有客户端和服务器的ht ...
- 10-18 noip提高组模拟赛(codecomb)T1倍增[未填]
T1只想到了找环,> <倍增的思想没有学过,所以看题解看得雨里雾里的(最近真的打算学一下! 题目出的挺好的,觉得noip极有可能出现T1T2T3,所以在此mark 刚开始T1以为是模拟,还 ...