<!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. Django基础

    一.路由系统 1.静态路由 from app01 import views urlpatterns = [ #url(r'^admin/', admin.site.urls), url(r'^home ...

  2. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  3. dynamic与匿名对象

    用dynamic接收匿名对象很方便,因为不需要去定义model了,但是也有一个弊端,就是匿名对象的作用范围是internal的,也就是只能存在于当前程序域,所以用dynimic跨程序域去接收一个匿名对 ...

  4. 数组类型与sizeof与指针的引用

    以char类型为例: char a[100];     //a类型为char[100]    &a类型为 char (*)[100]    *a类型为char char *p = a;     ...

  5. 回归分析法&一元线性回归操作和解释

    用Excel做回归分析的详细步骤 一.什么是回归分析法 "回归分析"是解析"注目变量"和"因于变量"并明确两者关系的统计方法.此时,我们把因 ...

  6. 【leetcode❤python】 278. First Bad Version

    #-*- coding: UTF-8 -*-# The isBadVersion API is already defined for you.# @param version, an integer ...

  7. JavaScript parseInt() 函数

    定义和用法 parseInt() 函数可解析一个字符串,并返回一个整数. 语法 parseInt(string, radix) 参数 描述 string 必需.要被解析的字符串. radix 可选.表 ...

  8. VIM常用设置

    批量替换:  #:%s/source_pattern/target_pattern/g "My Custom Configuration filetype plugin indent on ...

  9. centos7 dokcer fastdfs

    docker run --name=fastdfstmp -tid centos /bin/bash docker cp /home/fastdfs fastdfstmp:/home docker e ...

  10. CSS3:clip-path

    旧的clip 旧的css也提供了一个clip属性,但这个属性只能用于裁剪一个矩形,其本质是根据overflow:hidden隐藏掉了裁剪外的区域,使用: clip:rect(<top>,& ...