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> ...
随机推荐
- 16个ASP.NET MVC扩展点【附源码】
转载于:http://www.cnblogs.com/wupeiqi/p/3570445.html 1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中! ...
- main函数argc，argv操作
使用main(int argc, char *argv[])==main(int argc, char **argv)的基本操作是linux编程的最基本的一步,在windows下也是exe脱离IDE运 ...
- SQL语句查询数据库所有表和所有字段的详细信息（包括表描述和字段描述）
select (case then ddd.value else '' end ) as "表名(中文)" --如果表名相同就返回空 , (case then d.name els ...
- tensorflow学习之路---解决过拟合
''' 思路:1.调用数据集 2.定义用来实现神经元功能的函数(包括解决过拟合) 3.定义输入和输出的数据4.定义隐藏层(函数)和输出层(函数) 5.分析误差和优化数据(改变权重)6.执行神经网络 ' ...
- BZOJ3105: [cqoi2013]新Nim游戏(Xor线性无关组)
Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴.可以只拿一根,也可以拿走整堆火柴 ...
- 【Uva 10723】Cyborg Genes
[Link]: [Description] 给你两个串s1,s2; 让你生成一个串S; 使得s1和s2都是S的子列; 要求S最短; 求S的不同方案个数; [Solution] 设两个串的长度分别为n1 ...
- 关于Java IO InputStream 的一点整理！
程序的开发其中一直在用文件的读写.可是对于java其中输入流以及输出流仅仅是会用不理解,一直以来想搞清楚其,可是一直没有运行(悲剧).今天早上抽出半个小时通过JDK API1.6.0中文版帮助逐步的了 ...
- Java程序猿的JavaScript学习笔记（6——面向对象模拟）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- solrj简介
SolrJ基于httpClient: 使用SolrJ操作Solr会比利用httpClient来操作Solr要简单. SolrJ是封装了httpClient方法,来操作solr的API的. SolrJ底 ...
- HDU 2633 Getting Driving License(模拟）
Getting Driving License Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/ ...