<!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. 总结C#保留小数位数

    2.C#保留小数位N位,四舍五入 . decimal d= decimal.Round(decimal.Parse("0.55555"),2); 3.C#保留小数位N位四舍五入 M ...

  2. Web 端 js 导出csv文件

    http://www.qdfuns.com/notes/35821/2ab249182734d1f5c66da6b5cf395db9.html

  3. JAVA使用Gson解析json数据，实例

    封装类Attribute: public class Attribute { private int id; private String name; private int age; public ...

  4. mysql 5.6 安装教程

    首先是下载 mysql-installer-community-5.6.14.0.msi ,大家可以到 mysql 官方网去下载,也可以到笔者所提供的地址去下载,下载方法在这里就不多说了,我想大家都明 ...

  5. SQL 查找存在某内容的存储过程

    --查找存在某表名的存储过程 SELECT distinct b.name from syscomments a,sysobjects b WHERE a.id=b.id and a.TEXT LIK ...

  6. IPv4私有IP地址有哪些！

    私有IP地址是一段保留的IP地址.只是使用在局域网中,在Internet上是不使用的. 私有IP地址的范围有: 私网地址分有三类, A类中,第一段为10的都为私网地址,B类中,以172.16--172 ...

  7. Cocos2d-x开发的Android应用怎么加入插屏广告

    Cocos2d-x系统开发游戏已经变得比較流行,但是用这个开发的游戏.想要加入广告就不是那么理想了.尤其是插屏广告.由于插屏广告通常是要在暂停或者结束游戏的时候展示才比較的合理.但是Cocos2d-x ...

  8. sql-server 2005数据库文件恢复（检測到基于一致性的逻辑 I/O 错误）

    今天sql-server数据库突然报错: SQL Server 检測到基于一致性的逻辑 I/O 错误 校验和不对(应为: 0x7c781313,但实际为: 0x67a313c9). 在文件 'C:\P ...

  9. Linux下Oracle的sqlplus中上下左右退格键无法使用

    一.配置yum源并安装readline* 配置本地yum 1.挂载光盘 mount /dev/cdrom /mnt/media 2,新建本地yun源的配置文件 vi /etc/yum.repos.d/ ...

  10. SAP学习之路

    此贴记录学习SAP过程~如有错误请指出~ 6.看着网上学习SAP的貌似比較花精力.学习好的话发展前景还是不错的 5.尽管还不是非常懂.可是还是充满期待,期待着java转型abap. 能够在虚拟机上安装 ...