<!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. 访问 IIS 元数据库失败 解决办法

    装了VS2005再装IIS,结果出了些小问题访问IIS元数据库失败思考可能是次序出了问题,解决 1.打开CMD,进入 C:\WINDOWS\Microsoft.NET\Framework\v2.0.5 ...

  2. 如何查看 Linux 中所有正在运行的服务

    有许多方法和工具可以查看 Linux 中所有正在运行的服务.大多数管理员会在 System V(SysV)初始化系统中使用 service service-name status 或 /etc/ini ...

  3. 实现人脸识别性别之路---网页上的video标签

    <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg.但是,不同的浏览器对视频格式的支持也不一致,因此为了让浏览器都适应,我们使用source属性来对视频文件格式定义 ...

  4. Python, Django 性能分析工具的使用

    最近接手的 Apache HUE 项目性能出现了问题,线上经常出现响应时间过长或因为时间过长而无法服务等问题.老大让我准备弄个性能分析工具,便于追踪和分析平台当前的瓶颈出现在哪里. 那就搞起吧!先从代 ...

  5. Mybatis mapper.xml文件头文件备份

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  6. 【Uva 1336】Fixing the Great Wall

    [Link]: [Description] 给你长城上的n个修补点,然后你的位置为x; 你需要依次去这n个点,然后把它们全部修好. 但是修的前后顺序不一样的话,花费不一样. 如果立即把第i个点修好的话 ...

  7. solr 亿万级数据查询性能測试

    废话不多说,我电脑配置 i7四核cpu 8G内存 插入数据文档中有5个字段,当中有两个分词.一个int,一个date 批量插入測试一次10万循环10次总共100万用时85秒 批量插入測试一次10万循环 ...

  8. html5中的空格符

    html5中的空格符 1,Html中空格      不断行的空白(1个字符宽度)      半个空白(1个字符宽度)     一个空白(2个字符宽度)      窄空白(小于1个字符宽度) 2,Css ...

  9. Zabbix自动发现与自动注册.

    一, 自动发现与自动注册 自动发现? 当场景中出现要添加很多台主机的时候,一台台添加难免太过于繁琐,zabbix提供自动注册,自动发现,可以实现主机的批量添加, zabbix的发现包括三种类型: # ...

  10. C#List<string>和string[]之间的相互转换

     一.LIST概述 所属命名空间:System.Collections.Generic      public class List<T> : IList<T>, IColle ...