<!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. kubectl: Error from server: error dialing backend: remote error: tls: internal error

    使用kubectl logs,发现报了tls的错误,然后查看kubelet的日志,发现报了上面的错误,然后通过命令kubectl get csr查看发现有很多处于pending状态 最后通过命令 ku ...

  2. Spring Boot 自动装配（一）

    目录 目录 前言 1.起源 2.Spring 模式注解 2.1.装配方式 2.2.派生性 3.Spring @Enable 模块驱动 3.1.Spring框架中@Enable实现方式 3.2.自定义@ ...

  3. Java基础面试相关

    面试相关的问题(下) 四 Linux高级_ 1.Linux机器 变慢,怎么查看? (1)整机的性能 主要查看的是CPU和内存 先查看整机的top,使用命令 top 虚拟机 使用1可以查看哪个核被占用过 ...

  4. luogu P1832 A+B Problem

    题目背景 ·题目名称是吸引你点进来的 ·实际上该题还是很水的 题目描述 ·1+1=? 显然是2 ·a+b=? 1001回看不谢 ·哥德巴赫猜想 似乎已呈泛滥趋势 ·以上纯属个人吐槽 ·给定一个正整数n ...

  5. Pandas学习（二）——双色球开奖数据分析

    学习笔记汇总 Pandas学习(一)–数据的导入 pandas学习(二)–双色球数据分析 pandas学习(三)–NAB球员薪资分析 pandas学习(四)–数据的归一化 pandas学习(五)–pa ...

  6. [TimLinux] JavaScript AJAX如何重定向页面

    1. AJAX 异步JavaScript + XML,用于不通过页面from表单,来发送数据到后端服务器中 2. 如何重定向 服务器后端无法直接将页面重定向,因为服务器后端传回的任何数据,都将被XML ...

  7. 2019 湖南多校第一场(2018~2019NCPC) 题解

    解题过程 开场shl过B,C,然后lfw写J,J WA了以后shl写A,但是因为OJ上空间开小WA了,而不是MLE?,J加了特判过了.之后一直在检查A错哪了,直到qt发现问题改了空间,浪费许多时间,但 ...

  8. 网络基础TCP/IP

    TCP/IP协议族各层的作用如下 应用层 决定了向用户提供应用服务时通信的活动: 各类通用的应用服务.FTP(File Transfer Protocol,文件传输协议).DNS(Domain Nam ...

  9. Mint UI 之loadmore组件的坑：内部元素头部被遮挡了一部分

    前端经常会遇到数据分页加载的需求,mint-ui组件为大家提供了loadmore组件 但是我在使用的时候,遇到了一个问题:写好布局和样式以及逻辑之后,我的mt-loadmore标签的头部总是不顶在父元 ...

  10. 进程-（process）、线程-（Thread）

    进程和线程之间的区别: 内存之间的区别: 进程之间不可以共享内存空间,每个进程都有各自独立的内存空间: 线程之间则是可以共享一个进程里的内存空间: 通信机制方面的区别 默认情况下,进程之间很难互通的, ...