<!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. 意法STM32F1系列MCU单片机解密芯片破解复制

    意法STM32F1系列MCU单片机解密芯片破解复制 STM32F1系列MCU芯片解密: STM32F100解密 | STM32F101解密 | STM32F102解密 | STM32F103解密 |  ...

  2. 使用urllib2打开网页的三种方法

    #coding:utf-8 import urllib2 import cookielib url="http://www.baidu.com" print '方法 1' resp ...

  3. CentOS7中DHCP配置

    因为需要网络引导系统的安装,所以需要安装和配置DHCP服务器.DHCP(Dynamic Host Configuration Protocol) 动态主机配置协议,它提供了一种动态指定IP地址和配置参 ...

  4. 集中式vs分布式区别

    记录一下我了解到的版本控制系统,集中式与分布式,它们之间的区别做下个人总结. 什么是集中式? 集中式开发:是将项目集中存放在中央服务器中,在工作的时候,大家只在自己电脑上操作,从同一个地方下载最新版本 ...

  5. C语言_第一章

    1. 计算机能直接识别和接受的二进制代码称为     机器指令——>(集合) 机器语言. 2. 输出C #include<stdio.h> int main(){ printf(&q ...

  6. How does Unity.Resolve know which constructor to use?

    Question: Given a class with several constructors - how can I tell Resolve which constructor to use? ...

  7. Odoo Email Template Problem

    Odoo 8.0 的邮件模板是运行自jiajin2沙盒中的阉割版mako,像自定义及 <%%>等功能都无法正常使用. 且for-loop %for %endfor不能嵌套在table中使用 ...

  8. git add 命令

    git add xx命令可以将xx文件添加到暂存区,如果有很多改动可以通过 git add -A .来一次添加所有改变的文件. 注意 -A 选项后面还有一个句点. git add -A表示添加所有内容 ...

  9. iOS开发之GCD

    GCD,全称Grand Central Dispath,是苹果开发的一种支持并行操作的机制.它的主要部件是一个FIFO队列和一个线程池,前者用来添加任务,后者用来执行任务. GCD中的FIFO队列称为 ...

  10. 微信支付（20140923更新）商户支付密钥key的生成与设置

    微信支付(0923更新)商户支付密钥key的生成与设置 说明:新版微信支付,用户必须授权登录才能支付.需要商家自己设置商户号支付密钥. 设置商户号支付密钥方法如下: 1. 申请通过审核后,打开微信发来 ...