<!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. Chapter 05—Advanced data management(Part 2)

    二. 控制流 statement:一个单独的R语句或者是一个复合的R语句: cond:条件表达式,为TRUE或FALSE: expr:数字或字符表达式: seq:数字或字符串的顺序. 1.循环语句:f ...

  2. react可拖动的好用的树结构插件

    react tree 可拖动树结构: github地址: github地址:react-sortable-tree 安装: NPM npm install react-sortable-tree –s ...

  3. js人民币转大写

    <input type="text" oninput="OnInput (event)" value="1234567"> &l ...

  4. 关于非阻塞I/O、多路复用、epoll的杂谈

    本文主要是想解答一下这样几个问题: - 什么是非阻塞I/O - 非阻塞I/O和异步I/O的区别 - epoll的工作原理 文件描述符 文件描述符在本文有多次出现,难免有的朋友不太熟悉,有必要简单说明一 ...

  5. C 基础数据类型 性能测试

    简单测试了C语言中分别使用16位整数和32位整数实现的定点数和内建浮点数的乘除性能: 在release 下 循环 1 0000 0000 * 20次 的时间: CPU:7700K/4.2Ghz 定点数 ...

  6. 压缩感知重构算法之CoSaMP算法python实现

    压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...

  7. Redis 命令执行过程(下)

    在上一篇文章中<Redis 命令执行过程(上)>中,我们首先了解 Redis 命令执行的整体流程,然后细致分析了从 Redis 启动到建立 socket 连接,再到读取 socket 数据 ...

  8. vuex简单使用。

    项目结构: 1:首先在项目中新建store.js文件,.js文件内容如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ex ...

  9. BZOJ [ZJOI2007]矩阵游戏(二分图匹配)

    1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6390  Solved: 3133[Submit][Stat ...

  10. POJ3111

    Demy has n jewels. Each of her jewels has some value vi and weight wi. Since her husband John got br ...