<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

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

<style>

#div1 {width:100px; height:100px; background:red; position:absolute;}

#div2 {width:400px; height:300px; background:#CCC; position:relative;}

</style>

<script>

window.onload=function ()

{

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

    var oDiv2=document.getElementById('div2');

    var disX=0;

    var disY=0;

    oDiv.onmousedown=function (ev)

    {

        var oEvent=ev||event;

        disX=oEvent.clientX-oDiv.offsetLeft;

        disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)

        {

            var oEvent=ev||event;

            var l=oEvent.clientX-disX;

            var t=oEvent.clientY-disY;

            if(l<0)

            {

                l=0;

            }

            else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)

            {

                l=oDiv2.offsetWidth-oDiv.offsetWidth;

            }

            if(t<0)

            {

                t=0;

            }

            else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)

            {

                t=oDiv2.offsetHeight-oDiv.offsetHeight;

            }

            oDiv.style.left=l+'px';

            oDiv.style.top=t+'px';

        };

        document.onmouseup=function ()

        {

            document.onmousemove=null;

            document.onmouseup=null;

        };

        return false;

    };

};

</script>

</head>

<body>

<div id="div2">

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

</div>

</body>

</html>

JavaScript 智能社 拖拽的更多相关文章

  1. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  3. JavaScript动画-模拟拖拽

    模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标 ...

  4. JavaScript：鼠标拖拽效果

    (之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...

  5. JavaScript实现图片拖拽、粘贴上传

    前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...

  6. javascript实现的拖拽回放

    这个功能很简单,直接贴代码啊: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  7. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  8. 超级简单的利用javascript实现文件拖拽事件

    1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %& ...

  9. JavaScript 面向对象的拖拽

    一.body <div id="box"></div> 二.css <style> #box { position: abaolute; top ...

随机推荐

  1. Mac MySQL启动不了解决办法（MySQL卸载重新安装教程）

    一段时间没用MySQL,今天使用时突然发现启动不了了,怎么点start都没用,或者输入密码了  还是没用... 好急...找了一圈资料,没发现特别好的解决办法,只能使用大招了----->< ...

  2. zabbix 3.0.3 (nginx)安装过程中的问题排错记录

    特殊注明:安装zabbix 2.4.8和2.4.6遇到2个问题,如下:找了很多解决办法,实在无解,只能换版本,尝试换(2.2.2正常 | 3.0.3正常)都正常,最后决定换3.0.3 1.Error ...

  3. 前端少侠的ps故事

    前端少侠的ps故事 正所谓,码在江湖,身不由己.自21世纪前后端分离,代码分工细化以来,前端与设计的合作也变得越来越重要.有人说,如果前端懂设计的话,工作会更快一点.倘若说我入前端半年能算半个前端少侠 ...

  4. [转]ASP.NET Core 中的那些认证中间件及一些重要知识点

    本文转自:http://www.qingruanit.net/c_all/article_6645.html 在读这篇文章之间,建议先看一下我的 ASP.NET Core 之 Identity 入门系 ...

  5. JS--浏览器兼容之new Date

    Js 中有一个Date属性. 我们可以通过new Date(formatString) 来生命日期. 不过生命日期里面有一个坑就是. new Date('2016-05-13'), Chrome 和 ...

  6. 在Ubuntu Server 14.04中搭建FTP服务器(VMWare)

    自己搭建ftp服务器,方便主机与虚拟机中的Ubuntu传输文件. 选用的ftp软件为vsftpd. 1.命令行: sudo apt-get install vsftpd 2.安装完配置: vsftpd ...

  7. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  8. Leetcode, construct binary tree from inorder and post order traversal

    Sept. 13, 2015 Spent more than a few hours to work on the leetcode problem, and my favorite blogs ab ...

  9. Node6.9.2 —— Http官网笔记整理

    欢迎指导与讨论 : ) 序章 本文概要:http.Agent代理.http.ClientRequest客户端请求.http.server服务器.http.ServerResponse服务器相应.htt ...

  10. [LeetCode] Count Numbers with Unique Digits 计算各位不相同的数字个数

    Given a non-negative integer n, count all numbers with unique digits, x, where 0 ≤ x < 10n. Examp ...