<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简单的拖拽</title>

    <link rel="stylesheet" href="../toolkit/reset.min.css">

    <style>

        #box{

            height: 200px;

            width: 200px;

            background-color: #e277ff;

            position: absolute;

            cursor: move;

        }

    </style>

</head>

<body>

<div id="box"></div>

<script>

    var box=document.getElementById("box");

    function drag(e) {

        e=e||window.event;

        var _this=this;

        var mouseX=e.clientX,

                mouseY=e.clientY,

                boxL=this.offsetLeft,

                boxT=this.offsetTop;

        document.onmousemove=function (e) {

            e=e||window.event;

            var curMouseX=e.clientX,

                    curMouseY=e.clientY,

                    curBoxL=curMouseX-mouseX+boxL,

                    curBoxT=curMouseY-mouseY+boxT;

            var minW=0,maxW=((document.documentElement.clientWidth||document.body.clientWidth)-_this.offsetWidth);

            var minH=0,maxH=((document.documentElement.clientHeight||document.body.clientHeight)-_this.offsetHeight);

            if(curBoxL<=minW){

                curBoxL=minW;

            }else if(curBoxL>=maxW){

                curBoxL=maxW

            }

            if(curBoxT<=minH){

                curBoxT=minH;

            }else if(curBoxT>=maxH){

                curBoxT=maxH;

            }

            _this.style.left=curBoxL+"px";

            _this.style.top=curBoxT+"px";

        };

        document.onmouseup=function () {

            document.onmousemove=null;

        }

    }

    box.onmousedown=drag;

</script>

</body>

</html>

JS实现拖拽小案例的更多相关文章

  1. [转自大神]js拖拽小总结

    https://blog.csdn.net/u013040887/article/details/83059094 权侵删 这里写的是一个原生js实现拖拽的效果,首先: 1.实现拖拽的三大事件,是要首 ...

  2. Js元素拖拽功能实现

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

  3. jQuery UI API - 可拖拽小部件（Draggable Widget）(转)

    所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...

  4. js之拖拽事件

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

  5. javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  6. JS—实现拖拽

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

  7. JS实现拖拽功能

    本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https:// ...

  8. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  9. div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

随机推荐

  1. Debian9 ifconfig命令找不到解决办法

    Debian9 ifconfig命令找不到解决办法 ifconfig.route.arp和netstat等命令行工具(它们统称为net-tools),管理和排查各种网络配置.这类工具原先起源于BSD ...

  2. 在Windows下如何创建指定的虚拟环境

    前几天给大家分享了如何在默认的情况下创建虚拟环境,没来得及上车的伙伴,可以戳这篇文章:在Windows下如何创建虚拟环境(默认情况下).今天小编给大家分享一下,如何创建的指定的Python环境. 创建 ...

  3. MySQL Pool

    创建连接池 function SqlPool() { this.flag = true;//是否连接过 this.pool = mysql.createPool({ host : 'localhost ...

  4. 最长上升子序列（LIS）nlogn模板

    参考https://www.cnblogs.com/yuelian/p/8745807.html 注意最长上升子序列用lower_bound,最长不下降子序列用upper_bound 比如123458 ...

  5. 紫书 习题 10-16 UVa 1647 (高精度+递推）

    这道题我已经推出00和1过两步变成00了,可我没有继续做下去-- 后来看了博客发现自己已经做了90%了-- 可惜了,以后不要轻易放弃. 1的个数有个规律,就是每次都乘以2,因为0和1下一步都会变出1 ...

  6. 洛谷—— P1629 邮递员送信

    https://www.luogu.org/problem/show?pid=1629 题目描述 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比 ...

  7. hdu4565---So Easy!(矩阵)

    Problem Description A sequence Sn is defined as: Where a, b, n, m are positive integers.┌x┐is the ce ...

  8. 归并排序_分治算法 （白书P226）

    #include<iostream> #include<cstdio> #include<algorithm> using namespace std; int a ...

  9. Es61

    ECMAScript和JavaScript的关系 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础 ...

  10. Extjs在HtmlEditor的工具栏上插入自定义按钮

    Ext.ns('Ext.ux.form.HtmlEditor');Ext.ux.form.HtmlEditor.HR =Ext.extend(Ext.util.Observable,{ init:fu ...