<!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. 浅谈如何使用python抓取网页中的动态数据

    我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念, 动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到 ...

  2. 20161011001 treeView 递归

    protected void FillTree()        {            H_data H_data = new H_data(); H_data.sql_text1 = " ...

  3. Java当中的反射

    1:反射的概念 反射是指一类应用,它们能够自描述和自控制.也就是说,这类应用通过采用某种机制来实现对自己行为的描述(self-representation)和监测(examination),并能根据自 ...

  4. HTML 5 应用程序缓存(下)

    Manifest 文件manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的 ...

  5. (转)深入浅出 妙用Javascript中apply、call、bind

    原文连接 深入浅出 妙用Javascript中apply.call.bind 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且 ...

  6. python的tab自动补全

    vi tab.py #!/usr/bin/env python # python startup file import sys import readline import rlcompleter ...

  7. Maven安装配置使用

    Maven介绍 Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理 ...

  8. Word 宏命令大全

      1.   为宏命令指定快捷键.在WORD中,操作可以通过菜单项或工具栏按钮实现,如果功能项有对应的快捷键的话,利用快捷键可以快速实现我们需要的功能.如最常见的CTRL+O.CTRL+A等等.WOR ...

  9. 用FileInputStream读取数据，计算机如何实现将两个字节拼接成中文的？

    package itcast_02; import java.util.Arrays; /* * 在计算机中如何识别将连个字节转换为中文的呢? * 在计算机中中文的存储为两个字节 : * 第一个字节 ...

  10. an interview question(4)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 写这篇博客前请让博主先吐糟下自己的PC. i3+2G内存+开了一上午=C盘剩下0字节+打开VS2012花了半个小时+一晚上的心情不好 吐槽完PC, ...