html代码

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css样式

#div1{
width: 100px;
height: 100px;
background: red;
cursor: move;
position:absolute;
left:;
top:;
}
#div2{
width: 100px;
height: 100px;
background: black;
cursor: move;
position:absolute;
left:100px;
top:;
}
#div3{
width: 100px;
height: 100px;
background: blue;
cursor: move;
position:absolute;
left:200px;
top:;
}

js代码

<script>
window.onload=function(){
var oDiv1=new Drag();
oDiv1.init({
id:'div1'
}); var oDiv2=new Drag();
oDiv2.init({
id:'div2',
fD:function(){
document.title="hi"
}
}); var oDiv3=new Drag();
oDiv3.init({
id:'div3',
fD:function(){
document.title='jerry'
},
fU:function(){
document.title='byebye'
}
});
}
function Drag(){
this.oDiv=null;
this.disX=0;
this.disY=0; this.settings={
fD:function(){},
fU:function(){}
}
} Drag.prototype.init=function(opt){
var _this=this; extend(this.settings,opt); this.oDiv=document.getElementById(opt.id);
this.oDiv.onmousedown=function(ev){
var ev=ev || window.event;
_this.fnDown(ev);
_this.settings.fD(); document.onmousemove=function(ev){
var ev=ev || window.event;
_this.fnMove(ev);
}
document.onmouseup=function(){
_this.fnUp();
_this.settings.fU();
} return false;
}
}
Drag.prototype.fnDown=function(ev){
var ev=ev || window.event;
this.disX=ev.clientX-this.oDiv.offsetLeft;
this.disY=ev.clientY-this.oDiv.offsetTop;
}
Drag.prototype.fnMove=function(ev){
this.oDiv.style.left=ev.clientX-this.disX+'px';
this.oDiv.style.top=ev.clientY-this.disY+'px';
}
Drag.prototype.fnUp=function(){
document.onmousedown=null;
document.onmousemove=null;
} function extend(obj1,obj2){
for (var i in obj2){
obj1[i]=obj2[i];
}
}
</script>

js组件开发流程的更多相关文章

  1. Vue.js的复用组件开发流程

    本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

  2. js组件开发-移动端地区选择控件mobile-select-area

    移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空 ...

  3. winRT Com组件开发流程总结

    winRT Com组件开发: 1.编辑idl文件,winRT COM的idl文件与win32的idl文件有差异,如下: interface ItestWinRTClass; runtimeclass ...

  4. MIP组件开发 自定义js组件开发步骤

    什么是百度MIP? MIP(Mobile Instant Pages - 移动网页加速器)主要用于移动端页面加速 官网参考:https://www.mipengine.org/doc/00-mip-1 ...

  5. 一个简单的Vue.js组件开发示例

    //创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...

  6. Node.js基本开发流程

    创建一个hello world: 1.打开一个文本编辑器,在其中输入console.log("hello world"),并保存为hello.js; 注意:输入中文如果编码不是ut ...

  7. React-Native 组件开发方法

    前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...

  8. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  9. js组件的写法

    工作之中的不足,报了js培训班,因为工作加班原因缺了几天课(js组件开发),现在拾起来补补 <!doctype html> <html> <head> <me ...

随机推荐

  1. paip.mysql 5.6 安装总结

    paip.mysql 5.6 安装总结 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/atti ...

  2. RapidXml用法

    一.写xml 文件 #include <iostream> #include "rapidxml/rapidxml.hpp" #include "rapidx ...

  3. iOS开发——Swift篇&单例的实现

    Swift实现单例模式 Swift实现单例模式 由于Swift语言弱化了struct和class之间的界限,这里我分别给出自己写的两种的单例实现 class版本: class SwiftSinglet ...

  4. 《RESTful Web Services》第四章 设计URI

    引言 URI是跨越Web的资源描述符,一个URI由以下内容组成——协议.主机.端口号.路径

  5. Android_SystemService

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  6. RPM的基础命令/yum基本命令

    rpm的使用方式非常简单,常用的一些命令如下: 安装软件:rpm -ivh *.rpm 卸载软件:rpm -e 软件名 升级形式安装:rpm -U *.rpm 常用参数: -v 显示详细信息 -h 显 ...

  7. mysql 数据备份还原

    悲剧的一天,不小心将数据库删了... 命令行备份数据库 1.mysqldump命令进行备份.该命令将连接MySQL服务器并创建SQL转储文件,该文件包含了重新创建数据库所必需的所有SQL语句.该命令的 ...

  8. 关于Eclipse平台的使用和开发第一个SWT程序

    IBM把投入巨资开发的Eclipse作为一个开源项目捐献给了开源组织Eclipse.org Eclipse出色而有独创的平台特性,现在仍由IBM子公司OTI(主要从事Eclipse开发的人)继续领导着 ...

  9. [记录]java.math.biginteger cannot be cast to java.lang.long

    可以直接使用BigInteger类型进行接收, BigInteger id = (BigInteger)QueryRunner(conn,"SELECT LAST_INSERT_ID&quo ...

  10. (转)css3前缀

    CSS3的前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.看看都有哪些前缀: -webkit(chrome) -moz(firefox) -ms(ie) ...