<!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. 多路径软件常用操作（MPIO）

    一:查看存储盘的路径 1. 查看MPIO的存储盘的路径 # lspath (适用于所有存储的MPIO路径查询) # mpio_get_config -Av (适用于DS3K/DS4K的MPIO路径查询 ...

  2. How Chromium Displays Web Pages: Bottom-to-top overview of how WebKit is embedded in Chromium

    How Chromium Displays Web Pages This document describes how web pages are displayed in Chromium from ...

  3. [Usaco2009 Feb]Stock Market 股票市场 完全背包

    Code: #include<cstdio> #include<algorithm> #include<iostream> #include<cstring& ...

  4. tensorflow学习之路---Session、Variable（变量）和placeholder

    ---恢复内容开始--- 1.Session '''Session.run():首先里面的参数是一个API(函数的接口)的返回值或者是指定参数的值:功能:得知运算结果有两种访问方式:直接建立或者运用w ...

  5. 紫书 例题 9-14 UVa 1218 （树形dp）

    这道题有个初始值设成1e9, 然后这个值是要加很多次的,然后就会溢出变成负数, 然后就一直WA, 找这个bug找了一个小时--以后不能随便这样设那么大, 要考虑会不会加很多次然后溢出. 讲一下思路. ...

  6. 【Henu ACM Round #13 A】 Hulk

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. [代码] #include <bits/stdc++.h> using namespace std; int m ...

  7. IOCP模型总结（总结回想）

    IOCP旧代码重提.近期一直在玩其它方面的东东.时不时回想一下,收益多多. IOCP(I/O Completion Port,I/O完毕port)是性能最好的一种I/O模型.它是应用程序使用线程池处理 ...

  8. 集群通信组件tribes之用法

    上面已经对tribes的内部实现机制及原理进行了深入的剖析.在理解它的设计原理后看看怎样使用tribes.整个使用相当简单便捷,仅仅须要四步: ① 定义一个消息对象,因为这个消息对象是要在网络之间传递 ...

  9. vim 跨文件复制

    我们都知道,当我们在一个文件之间进行复制粘贴的时候,vim提供给我们的方法非常多,三个模式下都有方法实现字符.句子.段落之间的复制粘贴.当时,如果我们想要在两个文件之间进行复制粘贴,这就有点麻烦了.我 ...

  10. 如何才能正确的关闭Socket连接

    从TCP协议角度来看,一个已建立的TCP连接有两种关闭方式,一种是正常关闭,即四次挥手关闭连接:还有一种则是异常关闭,我们通常称之为连接重置(RESET).首先说一下正常关闭时四次挥手的状态变迁,关闭 ...