<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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

<script type="text/javascript">

window.onload=function()

{

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

oDiv.onmousedown=function(ev)

{

    var oEvent=ev||event;

    var x=;

    var y=;

    x=oEvent.clientX-oDiv.offsetLeft;

    y=oEvent.clientY-oDiv.offsetTop;

    document.onmousemove=function(ev)

    {

        var oEvent=ev||event;

        var out1=oEvent.clientX-x;

        var out2=oEvent.clientY-y;

        var oWidth=document.documentElement.clientWidth-oDiv.offsetWidth;

        var oHeight=document.documentElement.clientHeight-oDiv.offsetHeight;

        if(out1<)

        {out1=;}

        else if (out1>oWidth)

        {

            out1=oWidth;

        }

        if(out2<)

        {out2=;}

        else if (out2>oHeight)

        {

            out2=oHeight;

        }

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

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

    }

        document.onmouseup=function()

    {

        document.onmousemove=null;

        document.onmouseup=null;

    }

    return false;//解决firefox低版本的bug问题

}

}

</script>

</head>

原生js拖拽的更多相关文章

  1. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

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

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

  3. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  5. html5原生js拖拽上传（golang版）

    一次只能传一个文件,需在main.go同级目录中建一个upload文件夹 main.go package main import ( "fmt" "io" &q ...

  6. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  7. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  9. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

随机推荐

  1. spring-表达式语言-SpEL【转】

    Spring表达式语言(Spring Expression Language)简称:SpEL 课程概要: Spring表达式语言的入门介绍 Spring表达式语言的操作范围 Spring表达式语言的运 ...

  2. 数据结构之平衡二叉树（AVL树）

    平衡二叉树(AVL树)定义如下:平衡二叉树或者是一棵空树,或者是具有以下性质的二叉排序树: (1)它的左子树和右子树的高度之差绝对值不超过1: (2)它的左子树和右子树都是平衡二叉树. AVL树避免了 ...

  3. php 正则 常用基础

    正则表达式 用来描述一串字符串的字符串 定界符 除了字母数字反斜线之外的所有字符都可以 / / (强制使用) | | !! 原子 在自然界中的最小单位 叫做原子 正则中的原子:可以打印的字母,数字,符 ...

  4. [USACO] 铺放矩形块 题解

    题目大意: 给定4个矩形块,找出一个最小的封闭矩形将这4个矩形块放入,但不得相互重叠.所谓最小矩形指该矩形面积最小. 思路: 枚举矩形的安放顺序,再按照题目所给的图判断即可,主要要想到枚举. 代码: ...

  5. Leetcode Gray Code

    题目的意思就是将十进制转换成格雷码 首先将二进制转换成格雷码 根据此图可以看出二进制的第i和第i+1位异或为格雷码的第i+1位,对于给定的十进制数x,其(x>>1)相当于二进制向右移动一位 ...

  6. 对称、非对称加密算，openssl生成证书（笔记）

    对称加密算法 1.密钥只有一个,加密和解密都需要同一个密钥2.DES,IDEA,AES3.明文+密钥=密文, 密文+密钥=明文4.加密速度快,系统开销小,适用大量数据的加密 非对称加密算法1.密钥由公 ...

  7. c++ 离散数学 群的相关判断及求解

    采用C/C++/其它语言编程,构造一个n阶群<G={a,b,c,…},*>,G的阶|G|满足:3<=|G|<=6 1.判断该群是否是循环群,若是,输出该群的某个生成元. 2.给 ...

  8. vmstat命令学习

    vmstat 是Linux/Unix系统用来进行系统监控的工具 监控的目标主要有目标服务器的cpu使用率.内存的使用情况.虚拟内存交换情况,IO读写情况. 可以通过vmstat --help来获得该命 ...

  9. TotalCommander 之 快捷键

    显示编辑文件: F3:专门用来查看文件,这个恐怕是使用程度最高的快捷键了.当然并不是所有的文件都能打开,如需要查看更多类型的文件,还需要安装插件.或者直接双击用系统自带的软件查看也可.Ctrl + Q ...

  10. AOP学习心得&jdk动态代理与cglib比较

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入 ...