事例文件下载

 //拖动容器代码
var rDrag = {
o: null,
init: function (o) {
o.onmousedown = this.start;
},
start: function (e) {
var o;
e = rDrag.fixEvent(e);
e.preventDefault && e.preventDefault();
rDrag.o = o = this;
o.x = e.clientX - rDrag.o.offsetLeft;
o.y = e.clientY - rDrag.o.offsetTop;
document.onmousemove = rDrag.move;
document.onmouseup = rDrag.end;
},
move: function (e) {
e = rDrag.fixEvent(e);
var oLeft, oTop;
oLeft = e.clientX - rDrag.o.x;
oTop = e.clientY - rDrag.o.y;
rDrag.o.style.left = oLeft + 'px';
rDrag.o.style.top = oTop + 'px';
},
end: function (e) {
e = rDrag.fixEvent(e);
rDrag.o = document.onmousemove = document.onmouseup = null;
},
fixEvent: function (e) {
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}
//调用代码
 window.onload=function() {
 var obj = document.getElementById('demo');
        rDrag.init(obj);
 }; html代码
<div id="demo"  style="width: 100px; height: 100px; position: absolute;">拖动我</div>
拖动我

拖动div简单事例代码的更多相关文章

  1. VUE001. 拖动div盒子(自定义指令v-directives)

    拖动div是一个逻辑很简单的需求,监听容器的鼠标按下松开的事件,执行函数通过DOM改变标签的CSS偏移量. 在VUE构建的项目中,通过标签的 @mousedown 和 @mouseup 赋予行为事件, ...

  2. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  3. [可拖动DIV]刚开通博客顺便就写了点东西!

    说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...

  4. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

  5. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  6. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...

  7. Lucene.net站内搜索—3、最简单搜索引擎代码

    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...

  8. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  9. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

随机推荐

  1. 分享一个TP5实现Create()方法的心得

    在TP5中发现用不了以前3.X的Create()方法,虽然用input更严谨,但是字段比较多的话还是有些不艺术的3.X中的实现方法如下: $Model = D('User'); $Model-> ...

  2. {CSDN}{英雄会}{火车调度}

    思路: 给定一系列时刻表,求能满足各个时刻的最小火车数量. 打眼一看, 把此题归入到最大流,仔细一想不符合流网络的规律,换思路. 由于是一个最优化问题,自然想到动态规划和贪心. 最后确定贪心.从最早出 ...

  3. htmL5 html5Validate

    http://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/

  4. 构建ASP.NET网站十大必备工具(2)

    正常运行时间 当一个网站发布以后,你肯定希望你的网站不会遇到任何问题,一直处在正常运行状态之中.现在,我使用下面这些工具来监控“Superexpert.com”网站,确保它一直处在正常运行状态之中. ...

  5. 转 对菜鸟开发者的叮咛:花一万个小时练习Coding,不要浪费一万小时无谓地Debugging

    原文见http://blog.jobbole.com/74825/ Coding 之于科技的重要性不言可喻,也不再是软体工程师的专利,医师.律师.会计师.护理师.金融从业人员,甚至是听起来摸不着边的政 ...

  6. Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示

    Android中的ImageView只能显示矩形的图片,为了用户体验更多,Android实现圆角矩形,圆形或者椭圆等图形,一般通过自定义ImageView来实现,首先获取到图片的Bitmap,然后通过 ...

  7. Python3 多线程下载代码

    根据http://www.oschina.net/code/snippet_70229_2407修改而来的增强版.貌似原版源自Axel这个多线程下载工具. ''' Created on 2014-10 ...

  8. Asp.net web api部署在某些服务器上老是404

    asp.net web api部署在Windows服务器上后,按照WebAPI定义的路由访问,老是出现404,但定义一个静态文件从站点访问,却又OK. 这时,便可以确定是WebAPI路由出了问题,经调 ...

  9. 剑指offer题目11-20

    面试题11:数值的整数次方 public class Solution { public double Power(double base, int exponent) { if(exponent = ...

  10. php get_magic_quotes_gpc()函数

    magic_quotes_gpc函数在php中的作用是判断解析用户提示的数据,如包括有:post.get.cookie过来的数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊 ...