<!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. CoreDNS安装及集群验证

    目录 叙述 安装 测试 一 测试 二 CoreDNS 叙述 截止到目前为止,整个集群的核心组件已经安装完成. 此时集群内部还需要 CoreDNS 组件的支持. 安装 CoreDNS 是以 Pod 的形 ...

  2. nginx项目部署

    1.概念    1.Django项目(Web应用)    2.web服务        1.nginx        2.Apache            LNMP -> Linux Ngin ...

  3. 八大机器学习框架对比及Tensorflow的优势

    八大机器学习框架的对比: (1)  TensorFlow:深度学习最流行的库之一,是谷歌在深刻总结了其 前身 DistBelief 的经验教训上形成的:它不仅便携.高效.可扩 展,还能再不同计算机上运 ...

  4. 怎么解决js中如滑动到最底端一次操作触发多次

    定义一个布尔类型到标志,处理中将起设置为true ,处理完改完false,逻辑: data{ isInProcessing:false } //逻辑函数过程中: if(isInProcessing){ ...

  5. LeetCode 链表题 ( Java )

    leetcode 237. 删除链表中的节点 链接:https://leetcode-cn.com/problems/delete-node-in-a-linked-list/ 示例 : 输入: he ...

  6. 漫谈LiteOS之开发板-GPIO（基于GD32450i-EVAL）

    [摘要] 本文主要从GPIO的定义.工作模式.特色.工作场合.以及GD32450i-EVAL开发板的引脚.对应的寄存器以及GPIO的流水灯示例对GPIO加以介绍,希望对你有所帮助. 1定义 GPIO( ...

  7. 关于简单的Excel多页签底层导出_电子底账导出为例（.net core）

    [HttpPost] public ActionResult ExpEleAcc(string linknos) { string filenname = null; CommonResult< ...

  8. Python的Requests库基本方法函数

    一.Requests 库的七个常用函数: 1. requests.request(method,url,**kwargs) :method:请求方式,对应get/put/post等七种 :拟获取页面的 ...

  9. Dubbo一致性哈希负载均衡的源码和Bug，了解一下？

    本文是对于Dubbo负载均衡策略之一的一致性哈希负载均衡的详细分析.对源码逐行解读.根据实际运行结果,配以丰富的图片,可能是东半球讲一致性哈希算法在Dubbo中的实现最详细的文章了. 文中所示源码,没 ...

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

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