<!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# ArcGIS Engine 使当前选中的操作失效（清除当前鼠标事件）

    问题描述: 前提:我用的ENGINE9.3开发,拖了一个ToolbarControl控件,加了一些常用操作的工具(平移,放大,缩小)在上边. 问题:我做了一个增加点的按钮.当我平移完地图之后,点击增加 ...

  2. 从零使用qemu模拟器搭建arm执行环境

    为什么会有这篇文章 早在2011年的时候,跟当时同事一起讨论,做Linux系统开发正处于整个Linux开发中间层,没有上层的C/C++业务和数据库的开发经验.也没有底层的内核和驱动开发经验,究竟路该怎 ...

  3. intellij—idea14 注冊机

    package com.qunar.fresh; import java.math.BigInteger; import java.util.Date; import java.util.Random ...

  4. 一步一步跟我学hadoop(1)----hadoop概述和安装配置

    这几年云计算大数据非常火,借这个东风.今天開始学习apache的分布式计算框架hadoop,希望不要太落后. Hadoop说明 对于hadoop.apache官方wiki给出的说明为 Apache H ...

  5. js---10作用域链

    <html> <head> <title>scope basic</title> </head> <body> <scri ...

  6. [Codeforces558E]A Simple Task 线段树

    链接 题意:给定一个长度不超过 \(10^5\) 的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终 ...

  7. elasticsearch index 功能源码概述

    从本篇开始,对elasticsearch的介绍将进入数据功能部分(index),这一部分包括索引的创建,管理,数据索引及搜索等相关功能.对于这一部分的介绍,首先对各个功能模块的分析,然后详细分析数据索 ...

  8. 34.Intellij IDEA 安装lombok及使用详解

    转自:https://blog.csdn.net/qinxuefly/article/details/79159018 项目中经常使用bean,entity等类,绝大部分数据类类中都需要get.set ...

  9. POJ 3037 SPFA

    题意: 思路: 我们可以发现 到每个点的速度是一样的 那这就成水题了-. 裸的SPFA跑一哈 搞定 //By SiriusRen #include <cmath> #include < ...

  10. 洛谷P2891 [USACO07OPEN]吃饭Dining

    题目描述 Cows are such finicky eaters. Each cow has a preference for certain foods and drinks, and she w ...