拖拽js和jq写法
第一种原生js写法
window.onload=function ()
{
var oDrag=document.getElementById('drag'); oDrag.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDrag.offsetLeft;//x坐标
var disY=oEvent.clientY-oDrag.offsetTop;//y坐标 document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;//移动x坐标位置
var t=oEvent.clientY-disY;//移动y坐标位置
//限制范围
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDrag.offsetWidth)
{
l=document.documentElement.clientWidth-oDrag.offsetWidth;
} if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDrag.offsetHeight)
{
t=document.documentElement.clientHeight-oDrag.offsetHeight;
} oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}; document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
第二种jQuery写法
$(function(){
$('#drag').mousedown(function (){
var patch=parseInt($(this).css("height"))/2; /* 也可以写成var patch=parseInt($(this).css("width"))/2*/
$(document).mousemove(function (event){
var ox=event.clientX;
var oy=event.clientY;
var t=oy-patch;
var l=ox-patch;
var w=$(window).width()-$('#drag').width();
var h=$(window).height()-$('#drag').height();
if(t<0){
t=0;
}
else if(t>h){
t=h;
}
if(l<0){
l=0;
}
else if(l>w){
l=w;
}
$('.drag').css({top:t,left:l})
})
});
$(document).mouseup(function (){
$(this).unbind("mousemove");
});
})
拖拽js和jq写法的更多相关文章
- 拖拽js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 最好的拖拽js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生拖拽js利用localstorage保存位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
- jquery实现div拖拽
1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...
- 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
随机推荐
- spring boot文件上传、下载
主题:Spring boot 文件上传(多文件上传)[从零开始学Spring Boot]http://www.iteye.com/topic/1143595 Spring MVC实现文件下载http: ...
- js eval深入
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- nodeJs should+mocha+istanbul 测试 遇到的坑
.istanbul 和 mocha 结合进行nodejs测试的时候最后执行 istanbul cover _mocha test.sqrt.js的时候报错 如图: 用 ../node_modules/ ...
- cocos2dx对所有子节点设置透明度
看到cocos2dx2.2.5发布了,修复了输入框的bug,于是我们的项目也升级到了2.2.5, 升级过程还是比较顺利,没想到后来发现设置透明度无效了. 经过调试发现要调用一下setCascadeOp ...
- 超赞的lua开发工具zerobrane
zerobrane是用lua和wxWidgets编写的ide,而且是跨平台的,支持多种lua解释器,包括love2d. 而且最赞的是支持即时编程,可以在运行时直接修改变量,直接看到结果,不用重新运行, ...
- IIS故障问题(Connections_Refused)分析及处理【转】
这篇文章其实已经写好很久,只是后来一直没有重现当时的问题,或者因为业务的重要性.投诉的压力也就临时处理了.这几天某地市Web服务器连续多次出现这个问题,正好借这个案例来做个收尾. 前几个月有台重要的W ...
- 【UVa】Palindromic Subsequence(dp+字典序)
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=465&page=s ...
- iOS开发 - CALayer图层
CALayer的基本使用 在iOS中.你能看得见摸得着的东西基本上都是UIView.比方一个button.一个文本标签.一个文本输入框.一个图标等等.这些都是UIView 事实上UIView之所以能显 ...
- 转载:CSS3图标图形生成技术个人攻略
原始地址:http://segmentfault.com/a/1190000000481320 出处:http://www.zhangxinxu.com/wordpress/?p=4113
- Mac终端Screen命令使用指南
(1)创建会话 使用命令“screen -S RunWork”来创建一个screen会话,命令执行之后,就会得到一个新的shell窗口,为了便于标示可以用快捷键Ctrl-a A(就是按下Ctrl+a键 ...