<!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. mysql 基础 增删改查语句

    MySQL:众多关系型数据库中的一种仓库 --数据库箱子 --表数据库:进入mysql 命令行: mysql -uroot -p查看所有数据库: show databases;创建数据库: creat ...

  2. 学习Python函数笔记之二

    ---恢复内容开始--- 1.内置函数:取绝对值函数abs() 2.内置函数:取最大值max(),取最小值min() 3.内置函数:len()是获取序列的长度 4.内置函数:divmod(x,y),返 ...

  3. jdbc java数据库连接 10）批处理

    批处理 很多时候,需要批量执行sql语句! 需求:批量保存信息! 设计: AdminDao Public  void  save(List<Admin list){    // 目前用这种方式 ...

  4. C#中ToString()格式详解

    以下内容均摘自博客园,仅供资料查询. ToString格式化 在很多对象显示为字符串的时候都会使用到ToString中的格式化,由于以前没怎么注意到这个问题,想总结一下各个基础结构对象的格式化,以便后 ...

  5. CPU中断和轮询

    轮询顾名思义,CPU不停的询问,CPU很忙. 中断和轮询不同,是硬件上的,就像一个开关被按下了,没有什么东西在不停的询问开关有没有被按下,开关只是被按下了,就通电了,通电了就会发声一些事情. 可以看看 ...

  6. Workload Automation分析及其使用

    Workload Automation介绍 Workload Automation是提供一个在设备上运行各种workload的工具,使用Python编写.WA具有良好的框架结构,方便快捷的扩展.包含几 ...

  7. 错误400-The request sent by the client was syntactically incorrect

    springMVC中,某个页面提交时报400错误,如下图.     解决方法: 1.在网上找了一下,答案是通常遇到这个错误是因为前端jsp页面的控件名称和controller中接收的参数名称不一致.但 ...

  8. 【BZOJ 4582】【Usaco2016 Open】Diamond Collector

    http://www.lydsy.com/JudgeOnline/problem.php?id=4582 排好序后用两个指针直接\(O(n)\)扫,貌似这个东西学名"two pointers ...

  9. android-配置文件AndroidManifest.xml

    AndroidManifest.xml 是每个android程序中必须的文件.它位于整个项目的根目录,描述了package中暴露的组件(activities, services, 等等),他们各自的实 ...

  10. 敏捷组织中PMO应遵循的准则

    敏捷改变了人们的工作方式,不仅仅是开发部门,而且还包括其它的部门,例如HR.财务以及PMO等.在大多数组织中,PMO是一个控制体.它指导项目团队的规范.模板以及流程.目前,大多数的IT组织都敏捷化了. ...