<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title></title>
　　　　<style type="text/css">
　　　　　　*{
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　}
　　　　　　#box{
　　　　　　　　height: 100px;
　　　　　　　　width: 100px;
　　　　　　　　background:red;
　　　　　　　　position: absolute;
　　　　　　　　cursor:move;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="box">

　　　　</div>
　　</body>
</html>
<script>
　　var oBox = document.querySelector("#box");

　　oBox.onmousedown = function(evt){
　　　　var e = evt || event;
　　　　var offsetX = e.offsetX;
　　　　var offsetY = e.offsetY;
　　　　document.onmousemove = function(evt){
　　　　　　var e = evt || event;
　　　　　　var x = e.pageX - offsetX;
　　　　　　var y = e.pageY - offsetY;
　　　　　　if(x<0){
　　　　　　　　x = 0;
　　　　　　}
　　　　　　var maxLeft = window.innerWidth - oBox.offsetWidth;

　　　　　　if(x > maxLeft){
　　　　　　　　x = maxLeft;
　　　　　　}
　　　　　　if(y<0){
　　　　　　　　y = 0;
　　　　　　}
　　　　　　var maxTop = window.innerHeight - oBox.offsetHeight;
　　　　　　if(y > maxTop){
　　　　　　　　y = maxTop;
　　　　　　}
　　　　　　oBox.style.left = x + "px";
　　　　　　oBox.style.top = y + "px";
　　　　}
　　　　document.onmouseup = function(){
　　　　　　document.onmousemove = null;
　　　　}
　　}
</script>

JS完美拖拽的更多相关文章

  1. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  2. 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  4. JS—实现拖拽

    JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...

  5. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  6. 原生Js实现拖拽（适用于pc和移动端）

    效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js 实现拖拽排序

    <!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...

  9. javascript完美拖拽的实现

    直接上代码: HTML代码: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta chars ...

随机推荐

  1. 细说JVM内存模型

    细说JVM内存模型 前言 在正式学习 JVM 内存模型之前,先注意以下几个是问题: JVM 内存模型与 JAVA 内存模型不是同一个概念.JVM 内存模型是从运行时数据区的结构的角度描述的概念:而 J ...

  2. json注记

    Javascript支持的转换方式  eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 注:ie8(兼容模式), ...

  3. ASI中POST请求和文件下载

    //POST请求 1 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { // 1.URL NSURL *url = ...

  4. 性能达到原生 MySQL 七倍，华为云 Taurus 技术解读【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  5. gitlab 命令使用

    利用 rm -rf 误删除文件夹, 恢复的办法(注意 要 提前备份或提交 其他新改变的代码, 否则执行下面的命令会让之前的新代码全部消失): git status git reset HEAD \* ...

  6. 思科CISCO ASA 5521 防火墙 Ipsec 配置详解

    版本信息: Cisco Adaptive Security Appliance Software Version 9.9(2) Firepower Extensible Operating Syste ...

  7. 洛谷 题解 P2117 【小Z的矩阵】

    这题这么无聊,亏我还用了读入输出优化... 关键在于,这还是道黄题QWQ 掀桌而起 (╯‵□′)╯︵┻━┻ 显而易见,在i != j的情况下,a[i][j] + a[j][i]和a[j][i] + a ...

  8. Docker学习-jenkins+github实现持续集成和部署

    上一篇介绍了docker环境搭建,本篇继续深入,结合jenkins利用docker-compose容器编排简单介绍下如何实现个人学习的持续集成/部署. 本篇学习曲线: 1.安装/运行jenkins容器 ...

  9. ARTS-S anaconda常用命令

    建新的环境 conda create --name py36 python=3.6 显示所有环境 conda info --envs 一键安装 wget https://repo.anaconda.c ...

  10. DENEBOLA (See3CAM_CX3RDK) - CX3 Reference Design

    Denebola (See3CAM_CX3RDK) is a USB3.0 USB video class (UVC) reference design kit (RDK) developed by ...