<!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. int型、long型和long long型

    long long本质上还是整型,只不过是一种超长的整型.int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) . long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...

  2. Evacuation Plan-POJ2175最小费用消圈算法

    Time Limit: 1000MS Memory Limit: 65536K Special Judge Description The City has a number of municipal ...

  3. Java 自定义客户端与服务器

    一:浏览器如何请求数据基本原理 基本原理: 当浏览器输入地址向服务器请求数据时,实际上浏览器会在内部建立一个Socket对象,把http请求报文转变成byet[]字节,然后调用Socket的方法把这些 ...

  4. libevent源码分析：event_assign、event_new

    在libevent中,获取event类型对象的方法有两种,event_assign.event_new 1.event_assign() /** Prepare a new, already-allo ...

  5. Java SE 基础：标识（zhì）符

    Java SE 基础:标识(zhì)符 一.标识符定义 标识符,就是给类.接口.方法.变量等起名字时的字符序列 二.组成规则与注意事项 1.组成规则 英文大小写字母 数组 $ 和 _ 2.注意事项 不 ...

  6. 图说函数模板右值引用参数(T&&)类型推导规则（C++11）

    见下图: 规律总结: 只要我们传递一个基本类型是A④的左值,那么,传递后,T的类型就是A&,形参在函数体中的类型就是A&. 只要我们传递一个基本类型是A的右值,那么,传递后,T的类型就 ...

  7. Spring和EJB3的技术对比

    随着EJB3规范以及支持EJB3的Java EE应用服务器的即将发布,全新Java EE体系架构的新战争将拉开帷幕,在过去3年中如火如荼的Spring占据了Java EE应用开发基础平台的大半江山,面 ...

  8. WPF的学习笔记(1) -- （积累自2016年5月1日 至 2016年6月1日）

    敬告读者:因为是事件驱动模式的高速学习,高速学习意味着,不系统,不科学,不合逻辑,不一定正确.所以要是有不对的地方,页面下面留言给我,跪谢! 背景介绍: 最近在公司的开发工作中,接手了从别的公司交代过 ...

  9. 自定义一个类似UIAlertView的弹出框

    这个是和UIAlertView类似,但是可以自定义view的样式废话不多说,上代码: 首先第一步:创建一个继承自View的类如: #import <UIKit/UIKit.h> @clas ...

  10. 基于ubuntu 14搭建nginx+php+mysql环境

    基于最新的Ubuntu 14.04(2014年9月)搭建nginx.php.mysql环境, 以下全部命令行操作: 1 由于需要大量的权限操作,方便起见临时提升权限,使用root账号 sudo su ...