<!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. 这是一个测试 hello world

    第一次写博客,冒着生命危险尝试一下,发说说 搞了半天,发现原创文章在随笔发,我以为在文章目录发,白白在文章那里建了分类,太难了吧我

  2. 不服跑个分：ARM鲲鹏云服务器实战评测——华为云鲲鹏KC1实例 vs. 阿里云G5实例【华为云技术分享】

    原文链接:https://m.ithome.com/html/444828.htm 今年一月份,华为正式发布了鲲鹏920数据中心高性能处理器,该处理器兼容ARM架构,采用7纳米制造,最高支持64核,主 ...

  3. 基于netty4.x开发时间服务器

    在写代码之前 先了解下Reactor模型: Reactor单线程模型就是指所有的IO操作都在同一个NIO线程上面完成的,也就是IO处理线程是单线程的.NIO线程的职责是: (1)作为NIO服务端,接收 ...

  4. 配置基于全局地址池的DHCP

    配置基于全局地址池的DHCP 配置基于全局地址池的DHCP服务器,从所有接口上的用户都可以选择该地址池中的地址,是个公共地址池. 实验 1.拓扑图 2.实验步骤 基本配置 开启DHCP功能 创建一个全 ...

  5. react-native android/ios 手动/自动 修改版本号

    目录 一 手动操作 1.Android 2.IOS 二 自动从配置文件读取并写入相应的地方 1.package.json配置版本 2.Android: 3.IOS 添加sell代码 当版本迭代时候要修 ...

  6. java之方法的参数传递（值传递和引用传递）

    方法,必须有其所在类或对象调用时才有意义,若方法有参数: 形参:方法声明时的参数: 实参:方法调用时实际传给形参的参数值: java的实参如何传入方法呢? 首先要明确:变量分为两大类:基础数据类型.引 ...

  7. 小白进阶之路—python脚本（1）判断是否是一个目录

    #!/usr/bin/env python# -*- coding: utf-8 -*-import os   dir = "/var/www/html/EnjoyWeekend/" ...

  8. MySQL 数据查询小练习

    作业 # 创建班级表 create table class ( cls_id int auto_increment primary key, cls_name varchar(10) not null ...

  9. [Cake] 3. dotnet 本地工具 cake & dotnet format

    在上一篇[Cake] 2. dotnet 全局工具 cake中介绍了通过.Net Core 2.1 的全局工具dotnet tool命令来简化cake的安装和使用.因为是全局安装,则无法适应每个项目对 ...

  10. JS中&&和||的理解

    运算符可以从三个不同的层次进行理解. 第一层理解 当操作数都是布尔值时,"&&"对两个值执行布尔与(AND)操作. 复制代码代码如下: x==0 && ...