<!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. android微信支付总结+自己搭建服务器

    1.前期注册操作 1-1:微信开发平台:https://open.weixin.qq.com/ 1-2:创建移动应用 签名获取: 1.将自己的apk签名打包,运行到手机上. 2.将微信支付的签名工具, ...

  2. Struts 笔记 内部资料 请勿转载 谢谢合作

    Struts 概述 随着MVC 模式的广泛使用,催生了MVC 框架的产生.在所有的MVC 框架中,出现最早,应用最广的就是Struts 框架. Struts 的起源 Struts 是Apache 软件 ...

  3. java比较版本号

    java比较版本号,比如1.0.3和1.2.1相比较考虑到可以用String的compareTo()方法,代码如下: public class MainClass { public static vo ...

  4. python中文乱码问题

    在学习python的时候,当我要print中文的时候,会出现以下提示: py = '你好,世界!'print py File "n2.py", line 1 SyntaxError ...

  5. python之禅

    >>> import this The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is ...

  6. PHP网页

    1.安装YUM源 2.安装httpd与PHP yum install httpd -y yum install php -y 3.进入htmi文件中 cd /var/www/html/ 4.将自己编写 ...

  7. Java开发中经典的小实例-（swich(){case:参数break;default: break;}）

    import java.util.Scanner;public class Test6 {    public static void main(String[] args) {        // ...

  8. Filter

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有 web资源:例如Jsp, Servlet, 静 ...

  9. 详解MVC设计模式

    1 MVC介绍 众所周知MVC不是设计模式,是一个比设计模式更大一点的模式,称作设计模式不合理,应该说MVC它是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种:Observer (观 ...

  10. c# 正则提取小例子

    常用分组语法 分类 代码/语法 说明 捕获 (exp) 匹配exp,并捕获文本到自动命名的组里 (?<name>exp) 匹配exp,并捕获文本到名称为name的组里,也可以写成(?'na ...