JS实现拖拽小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的拖拽</title>
<link rel="stylesheet" href="../toolkit/reset.min.css">
<style>
#box{
height: 200px;
width: 200px;
background-color: #e277ff;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box=document.getElementById("box");
function drag(e) {
e=e||window.event;
var _this=this;
var mouseX=e.clientX,
mouseY=e.clientY,
boxL=this.offsetLeft,
boxT=this.offsetTop;
document.onmousemove=function (e) {
e=e||window.event;
var curMouseX=e.clientX,
curMouseY=e.clientY,
curBoxL=curMouseX-mouseX+boxL,
curBoxT=curMouseY-mouseY+boxT; var minW=0,maxW=((document.documentElement.clientWidth||document.body.clientWidth)-_this.offsetWidth);
var minH=0,maxH=((document.documentElement.clientHeight||document.body.clientHeight)-_this.offsetHeight);
if(curBoxL<=minW){
curBoxL=minW;
}else if(curBoxL>=maxW){
curBoxL=maxW
}
if(curBoxT<=minH){
curBoxT=minH;
}else if(curBoxT>=maxH){
curBoxT=maxH;
} _this.style.left=curBoxL+"px";
_this.style.top=curBoxT+"px";
};
document.onmouseup=function () {
document.onmousemove=null;
}
}
box.onmousedown=drag;
</script>
</body>
</html>
JS实现拖拽小案例的更多相关文章
- [转自大神]js拖拽小总结
https://blog.csdn.net/u013040887/article/details/83059094 权侵删 这里写的是一个原生js实现拖拽的效果,首先: 1.实现拖拽的三大事件,是要首 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- jQuery UI API - 可拖拽小部件（Draggable Widget）(转)
所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...
- js之拖拽事件
js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...
- javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）
界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...
- JS—实现拖拽
JS中的拖拽示例: 1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变 2)实现拖拽遇到的问题: 问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...
- JS实现拖拽功能
本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https:// ...
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
- div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
随机推荐
- centos 5的yum源无法使用的解决方法( 转载)
由于centos 5 已经停更.于是导致yum源也不能用了. 例如安装screen的时候提示 Determining fastest mirrors* base: denver.gaminghost. ...
- 【Redis实现运行状态下切换RDB备份至AOF备份】
redis持久化方式有哪些?又有何区别? rdb:基于快照的持久化,速度更快,一般用作备份,主从复制也是依赖于rdb持久化功能. aof:以追加的方式记录redis操作日志的文件,可最大程度的保证re ...
- 【Codeforces Round #460 (Div. 2) D】Substring
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果有环 ->直接输出-1 (拓扑排序如果存在某个点没有入过队列,说明有环->即入队的节点个数不等于n 否则. 说明可以 ...
- [Python] Create Unique Unordered Collections in Python with Set
A set is an unordered collection with no duplicate items in Python. In this lesson, you will learn h ...
- leetcode 链表 Partition List
Partition List Total Accepted: 19761 Total Submissions: 73252My Submissions Given a linked list and ...
- 流媒体技术 rtp/rtcp/rtsp资料精华！
流媒体技术 rtp/rtcp/rtsp资料精华! 流媒体技术 流媒体是指在网络中使用流式(Sreaming)传输技术进行传输的连续时基媒体.如音频数据流或视频数据流,而不是一种新的媒体.流媒体技 ...
- jquery12 queue() : 队列方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 三个角度解构云计算，商业驱动or技术驱动？
从云计算的使用者到云服务的输出者,大多互联网公司在过去一年完成了角色的转换,也让云计算的未来更加扑朔迷离.不过,抛却进入时间这个评判因素,单从技术和商业化的角度来解构云计算的话,对于云计算的格局以及未 ...
- javaweb三、JDBC访问数据库
JDBC是J2SE的内容,是由java提供的访问数据库的接口,但没有提供具体的实现方法,需要数据库厂商提供,就是对应的数据库驱动. 这样的好处是可以方便的更换数据库,提高了扩展性.这也是面向接口编程的 ...
- java+spark-sql查询excel
Spark官网下载Spark Spark下载,版本随意,下载后解压放入bigdata下(目录可以更改) 下载Windows下Hadoop所需文件winutils.exe 同学们自己网上找找吧,这里就不 ...