<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;}

</style>

</head>

<body>

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

<script>

window.onload=function()

{

  var oDiv=document.getElementById('div');

  var disX=0;

  var disY=0;

  oDiv.onmousedown=function(ev) //鼠标按下DIV

  {

    var oEvent=ev||event;

    disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离，这个距离是不会变的，通过这个新鼠标的X坐标减去disX就是DIV的Left

    disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离，这个距离是不会变的，通过这个新鼠标的Y坐标减去disY就是DIV的Top

    document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件

    {

      var oEvent=ev||event;

      var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left

      var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top

      if(oLeft<0) //当DIV的Left小于0，也就是移出左边

      {

        oLeft=0; //就把DIV的Left设置为0，就不能移出左边

      }

      else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度，如果Left大于这个像素

      {

        oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素

      }

      if(oTop<0) //当DIV的To小于0，也就是移出左边

      {

        oTop=0; //就把DIV的Top设置为0，就不能移出上边

      }

      else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素，如果Top大于这个像素

      {

        oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素

      }

      oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值

      oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值

    };

    document.onmouseup=function() //鼠标松开时

    {

      document.onmousemove=null; //把鼠标移动清楚

      document.onmouseup=null; //把鼠标松开清楚

    };

    return false; //阻止FireFox的默认事件 bug

  };

};

</script>

</body>

</html>

DOM元素拖拽效果的更多相关文章

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

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

  2. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  3. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  4. Js元素拖拽功能实现

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

  5. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  6. ExtJS拖拽效果

    ExtJS拖拽效果 <html> <head> <title>hello</title> <meta http-equiv="conte ...

  7. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  8. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  9. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

随机推荐

  1. 测评：华为最新移动应用/APP测试工具MobileTest

    一.目前移动应用/App的测试痛点及可选方案 移动互联网市场进入下半场,同质化竞争激烈,平均获客成本增加.屏幕不适配.闪退.无响应.UI异常等兼容性问题严重影响用户体验,影响用户转化率和用户粘性.如何 ...

  2. Adobe After Effects 2017-14.0安装教程

    Adobe After Effects 2017-14.0安装教程 第一步:首先请将电脑的网络断开,很简单:禁用本地连接或者拔掉网线,这样就可以免除登录Creative Cloud帐号,安装更方便快捷 ...

  3. MYSQL和JAVA（课堂笔记）

    MYSQL 数据库管理工具 JAVA  编程语言 数据库驱动(JAVA和MYSQL对接方式) 到官网上下载驱动 加载驱动 import java.sql.Connection;import java. ...

  4. java(5)循坏结构

    一. while循环 1.循环的优点? 减少重复代码的编写:程序会更加的简洁 2.语法 while(表达式){ // 1.表达式是[循环条件],结果必须是boolean类型 //2.{}中的代码,即[ ...

  5. Asp.Net Core-----简介与安装

    Asp.Net Core简介 ASP.NET Core 是一个全新的开源.跨平台框架,可以用它来构建基于网络连接的现代云应用程序,比如:Web 应用,IoT(Internet Of Things,物联 ...

  6. Android上解析Json格式数据

    package com.practice.json; import org.json.JSONArray; import org.json.JSONException; import org.json ...

  7. sqlmap用户手册 [详细]

    当给sqlmap这么一个url的时候,它会: 1.判断可注入的参数 2.判断可以用那种SQL注入技术来注入 3.识别出哪种数据库 4.根据用户选择,读取哪些数据 sqlmap支持五种不同的注入模式: ...

  8. AppServ安装的一点小麻烦----

    好久,没装AppServ了,今天安装过程顺利,但是Apache,服务开启不了,页面也不能访问. 刚开始以为是版本下载错误了,先后换了N个版本,都不行. 在网上搜的过程中,偶然发现,一句话:64位系统, ...

  9. Java基础——封装

    最近学习Java面向对象方面的知识点,一直没时间更新博客,因为这块的知识点真的蛮绕的.一个知识点一个知识点的往外冒,而且对于我这个初学者来说区分构造器和方法就花费了一整天的时间.现在准备再重新过一遍知 ...

  10. Linux（UBUNTU） 下安装Eclipse

    到目前为止,Eclipse 的官方最新版本为 Eclipse Kepler (4.3.2),我们可以使用如下步骤在 Ubuntu 14.04 或其它 Ubuntu 版本中进行快速安装. 1.安装Ope ...