<!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. nginx反向代理+集群

    1.前期准备: client:192.168.4.1 eth0 proxy:192.168.4.5 eth0 web1:192.168.4.100 eth0 内容2 web2:192.168.4.20 ...

  2. auto_clipboard

    黄山松发表于博客园:http://www.cnblogs.com/tomview/p/6137179.html #ifndef __HSS_AUTO_CLIPBOARD_HSS__#define __ ...

  3. 基于UDP的网络编程

    与TCP编程相比较,UDP缺少了connect().listen()及accept()函数,这是由于UDP协议无连接的特性,不用维护TCP的连接.断开等状态. UDP编程框图 API函数 socket ...

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

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

  5. 使用jenkins配置.net mvc网站进行持续集成三

    前两篇讲解了Jenkins的配置和VS远程发布,现在还有一个问题,VS项目远程发布的时候,配置的是覆盖所有文件重生成的,而通常类似于配置文件这种东西,在本地开发环境和测试环境是不一样的.所以我们通常需 ...

  6. C#把 DataTable转换为Model实体

    public static List<T> GetModelFromDB<T>( DataTable dt ) { List<T> data = new List& ...

  7. [LeetCode] Construct Binary Tree from Preorder and Inorder Traversal 由先序和中序遍历建立二叉树

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  8. SQL Server数据库设计规范

    数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求.数据库设计过程中命名规范很是重要,命名规范合理的 ...

  9. 百度地图demo

    以下代码拷贝成html,直接运行即能看到百度地图 <!DOCTYPE html><html> <head> <meta http-equiv="Co ...

  10. ceph hadoop spark 大数据处理

    http://docs.ceph.com/docs/giant/cephfs/hadoop/ https://indico.cern.ch/event/524549/contributions/218 ...