拖拽js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>拖拽js</title>
<style type="text/css">
html, body {
overflow:hidden;
}
body, div, {
margin:0;
padding:0;
}
body {
color:#fff;
font:12px/2 Arial;
}
p {
padding:0 10px;
margin-top:10px;
}
span {
color:#ff0;
padding-left:5px;
}
#box {
position:absolute;
width:300px;
height:150px;
background:#D5CDDA;
border:2px solid #ccc;
top:150px;
left:400px;
margin:0;
}
#drag {
height:25px;
cursor:move;
background:#724a88;
border-bottom:2px solid #ccc;
padding:0 10px;
} </style>
</head>
<body>
<div id="box">
<div id="drag">拖动区域</div>
被拖动的整个div
</div>
</body>
</html> <script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
moveBox($("#box"),$("#drag")) ;
})
//B被拖动的div，BT可拖动区域
function moveBox(B,BT){
var bDrag = false;
var _x,_y;
BT.mousedown(function(event){
var e=event || window.event;
bDrag = true;
_x=e.pageX-B.position().left;
_y=e.pageY-B.position().top;
return false
})
$(document).mousemove(function(event){
if(!bDrag) return false;
var e=event || window.event;
var x=e.pageX-_x;
var y=e.pageY-_y;
console.log(B.position());
var maxL = $(document).width() - B.outerWidth();
var maxT = $(document).height() - B.outerHeight();
x = x < 0 ? 0: x; x = x > maxL ? maxL: x;
y = y < 0 ? 0: y; y = y > maxT ? maxT: y;
B.css({left:x,top:y});
return false
}).mouseup(function(){
bDrag = false;
return false
})
}
</script>
拖拽js的更多相关文章
- 最好的拖拽js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 拖拽js和jq写法
第一种原生js写法 window.onload=function () { var oDrag=document.getElementById('drag'); oDrag.onmousedown=f ...
- 原生拖拽js利用localstorage保存位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- jquery实现div拖拽
1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
随机推荐
- HUST 1017 Exact cover dance links
学习:请看 www.cnblogs.com/jh818012/p/3252154.html 模板题,上代码 #include<cstdio> #include<cstring> ...
- input文字方框中，字体颜色的变化 要求默认的字体颜色是灰色，当要输入字时，字体是正常的黑色
1 <input type=text name='address' size=60 maxlength=60 style="color:gray" value="( ...
- python 网络编程（一）---基础
1.理解TCP 1.1 寻址 首先任何基于TCP/IP的网络,每台机器都有唯一的IP地址,只需要知道接受者机器的IP地址,信息就可以传送过去. 其次,TCP通过使用端口号来知道机器究竟是哪个程序应该接 ...
- TCP/IP 子网掩码浅析
定义 是一种用来指明一个IP地址的哪些位标识的是主机所在的子网以及哪些位标识的是主机的位掩码.子网掩码不能单独存在,它必须结合IP地址一起使用.子网掩码只有一个作用,就是将某个IP地址划分成网络地址和 ...
- HTTP 报文总结、外送两本电子书
写在前面的话:喜欢这个比喻:如果说HTTP是因特网的信使,那么HTTP报文就是它用来搬东西的包裹. HTTP是一个应用层协议,研究它的内容的确很枯燥,没啥意思,都是规定好的,我们只需要知道是什么就好了 ...
- highcharts图表的图例legend怎么改变显示位置
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
- poj 1704 阶梯博弈
转自http://blog.sina.com.cn/s/blog_63e4cf2f0100tq4i.html 今天在POJ做了一道博弈题..进而了解到了阶梯博弈...下面阐述一下我对于阶梯博弈的理解. ...
- 字符串匹配算法——KMP算法学习
KMP算法是用来解决字符串的匹配问题的,即在字符串S中寻找字符串P.形式定义:假设存在长度为n的字符数组S[0...n-1],长度为m的字符数组P[0...m-1],是否存在i,使得SiSi+1... ...
- 【C语言】-数据输入-scanf( )和getchar( )
格式化输入函数scanf( ) scanf( )功能: 按照指定的格式读入键盘上输入的若干个任意类型的数据,存入到argument参数所指向的内存单元,函数返回值为读入并赋给argument的数据个数 ...
- hdu1863 畅通工程(最小生成树之prim)
Problem Description 省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).经过调查评估,得到的统计表中列出了有可 ...