<!DOCTYPE html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

        <style>

		.box{

            position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:0px;top:0px;left:20px;

            /*修饰*/

            border-radius:50%;box-shadow: 5px 5px 15px rgba(42,56,123,0.5);

        }

		#box1{

            position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:200px;top:200px;left:20px;

            /*修饰*/

            border-radius:50%;box-shadow: 5px 5px 15px rgba(42,56,123,0.5);

        }

		</style>

    </head>

    <body>

            <div class="box"></div>

			<div id="box1"></div>

    </body>

<script type="text/javascript">

//@zijian 2015/8/11

function Drag(id){

    this.obj = document.getElementById(id)||document.getElementsByClassName(id)[0];//class or ID

    this.disX = 0;

    this.disY = 0;//Initialization parameters

}

Drag.prototype.init = function (){

    var that = this;

    this.obj.onmousedown = function (e){

        var e = e || event;

        that.mouseDown(e);

        // Prevent the default event

        return false;

    };

};

// as the event is mouse

Drag.prototype.mouseDown = function (e){

    var that = this;

    this.disX = e.clientX - this.obj.offsetLeft; //Get mouse parameters for start

    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){

        var e = e || window.event;

        that.mouseMove(e);

    };  

    document.onmouseup = function (){

        that.mouseUp();

    }

};

Drag.prototype.mouseMove = function (e){

    this.obj.style.left = (e.clientX - this.disX) + 'px'; //Get mouse parameters for end

    this.obj.style.top = (e.clientY - this.disY) + 'px';

};

Drag.prototype.mouseUp = function (){

    document.onmousemove = null;

    document.onmouseup = null; //mouse leave status

};

    var drag = new Drag('box');

    drag.init();

	var drag1 = new Drag('box1');

     drag1.init();

	</script>

</html>

　　

原生js通过prottype写的一个简单拖拽的更多相关文章

  1. Javascript写的一个可拖拽排序的列表

    自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档 ...

  2. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  3. 原生js及H5模拟鼠标点击拖拽

    一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...

  4. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  5. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  6. 只是一个用EF写的一个简单的分页方法而已

    只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...

  7. 写了一个简单的CGI Server

    之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看 ...

  8. 自己写的一个简单PHP采集器

    自己写的一个简单PHP采集器 <?php //**************************************************************** $url = &q ...

  9. 写了一个简单可用的IOC

    根据<架构探险从零开始写javaweb框架>内容写的一个简单的 IOC 学习记录    只说明了主要的类,从上到下执行的流程,需要分清主次,无法每个类都说明,只是把整个主线流程说清楚,避免 ...

随机推荐

  1. 应用ERP系统与企业的关系

      随着ERP系统的深入发展,越来越多的企业开始实施ERP,ERP实施是借用一种新的管理模式来改造原企业旧的管理模式,是先进的.行之有效的管理思想和方法.ERP软件在实际的推广应用中,其应用深度和广度 ...

  2. CAS示例环境部署及配置

    http://wenku.baidu.com/link?url=d6JjWqOtuUediSkV18XagtVG9lVC2hTiaIEimfIgv1PIW8RMA1sXeIqqtJkW90lleYPQ ...

  3. 基于layerpage 前后端异步分页

    #下载jquery 和 layerpage1.核心分页方法 laypage({ cont: 'page1', //容器.值支持id名.原生dom对象,jquery对象. pages: json.tot ...

  4. 【转】创建SVN仓库的步骤

    转载地址:http://www.cnblogs.com/ivan0626/p/3783053.html   今天在客户现场联调,两个开发人员之间的代码想用SVN来管理,所以就临时在本地机器上搭建一个S ...

  5. 【转】Android APK反编译就这么简单 详解（附图）

    转载地址:http://blog.csdn.net/vipzjyno1/article/details/21039349 在学习Android开发的过程你,你往往会去借鉴别人的应用是怎么开发的,那些漂 ...

  6. Python爬网获取全国各地律师电话号

    [本文出自天外归云的博客园] 从64365网站获取全国各地律师电话号,用到了python的lxml库进行对html页面内容的解析,对于xpath的获取和正确性校验,需要在火狐浏览器安装firebug和 ...

  7. JMeter入门使用指南

    初识JMeter 最近开始接触和使用JMeter进行性能测试,也是因为工作需要,不得不学习更多新技能,在此之前一直使用LR进行WEB系统的压力测试,但是在ZK开发的WEB系统,我选择使用JMeter. ...

  8. 非默认安装目录下mysql数据的导出与导入

    系统:Centos 6.5 1.首先确定msyql是否安装以及安装目录: [root@localhost ~]# service mysqld status mysqld (pid ) 正在运行... ...

  9. 苹果微信input输入框被键盘遮挡

    最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候, 苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住.可以用以下方法解决: docu ...

  10. 关于composer安装插件时候提示找不到fxp插件时候的解决办法

    如果你在某个目录使用composer.phar,而且在别的目录页使用了composer,并没有全局安装composer的时候,不同目录之间的可能会互相干扰从而报错 root@tyr:/var/www/ ...