拖动一个HTML元素


Posted in Javascript onDecember 22, 2006

<script content="text/javascript">
var iMouseDown = false;
var dragObject = null;
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

// Demo 0 variables
var DragDrops = [];
var curTarget = null;
var lastTarget = null;

function makeDraggable(item){
  if(!item) return;
  item.onmousedown = function(ev){
    dragObject = this;
    mouseOffset = getMouseOffset(this, ev);
    return false;
  }
}

function getMouseOffset(target, ev){
  ev = ev || window.event;

  var docPos = getPosition(target);
  var mousePos = mouseCoords(ev);
  return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
  var left = 0;
  var top = 0;
  while (e.offsetParent){
    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
    top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
    e = e.offsetParent;
  }

  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
  top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

  return {x:left, y:top};

}

function mouseCoords(ev){
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

function mouseDown(ev){
  ev = ev || window.event;
  var target = ev.target || ev.srcElement;

  if(target.onmousedown || target.getAttribute('DragObj')){
    return false;
  }
}

function mouseUp(ev){

  //dragObject = null;

  if(dragObject){
    ev = ev || window.event;
    var mousePos = mouseCoords(ev);

    var dT = dragObject.getAttribute('droptarget');
    if(dT){
      var targObj = document.getElementById(dT);
      var objPos = getPosition(targObj);
      if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) 
&& (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth)))
 && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){
        var nSrc = targObj.getAttribute('newSrc');
        if(nSrc){
          dragObject.src = nSrc;
          setTimeout(function(){
            if(!dragObject || !dragObject.parentNode) return;
            dragObject.parentNode.removeChild(dragObject);
            dragObject = null;
          }, parseInt(targObj.getAttribute('timeout')));
        } else {
          dragObject.parentNode.removeChild(dragObject);
        }
      }
    }
  }
  dragObject = null;

  iMouseDown = false;
}

function mouseMove(ev){
  ev = ev || window.event;

  /*
  We are setting target to whatever item the mouse is currently on

  Firefox uses event.target here, MSIE uses event.srcElement
  */
  var target = ev.target || ev.srcElement;
  var mousePos = mouseCoords(ev);

  if(dragObject){
    dragObject.style.position = 'absolute';
    dragObject.style.top = mousePos.y - mouseOffset.y;
    dragObject.style.left = mousePos.x - mouseOffset.x;
  }

  // track the current mouse state so we can compare against it next time
  lMouseState = iMouseDown;

  // this prevents items on the page from being highlighted while dragging
  if(curTarget || dragObject) return false;
}

function addDropTarget(item, target){
  item.setAttribute('droptarget', target);
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

window.onload = function (){
  makeDraggable(document.getElementById('DragImage9'));
  makeDraggable(document.getElementById('DragImage10'));
  makeDraggable(document.getElementById('DragImage11'));
  makeDraggable(document.getElementById('DragImage12'));

  addDropTarget(document.getElementById('DragImage9'), 'TrashImage1');
  addDropTarget(document.getElementById('DragImage10'), 'TrashImage1');
  addDropTarget(document.getElementById('DragImage11'), 'TrashImage1');
  addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');
}
</script>
</head>
<body>

<fieldset id="Demo6" style="height: 70px"><h3>Demo - Drag any of the images</h3>
<img id="TrashImage1" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_trash.gif" />
<img id="DragImage9" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_spade.gif" />
<img id="DragImage10" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_heart.gif" />
<img id="DragImage11" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_diamond.gif" />
<img id="DragImage12" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_club.gif" />
</fieldset>

Javascript 相关文章推荐
JavaScript Eval 函数使用
Mar 23 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
JavaScript中Array 对象相关的几个方法
Dec 22 #Javascript
JavaScript事件列表解说
Dec 22 #Javascript
改进:论坛UBB代码自动插入方式
Dec 22 #Javascript
用javascript获取地址栏参数
Dec 22 #Javascript
在IE下:float属性会影响offsetTop的取值
Dec 22 #Javascript
Javascript实现的分页函数
Dec 22 #Javascript
一些常用的Javascript函数
Dec 22 #Javascript
You might like
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
Angular排序实例详解
2017/06/28 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python中的一些陷阱与技巧小结
2015/07/10 Python
python实现ID3决策树算法
2017/12/20 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
自荐信格式
2013/12/01 职场文书
质量月活动策划方案
2014/03/10 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
餐馆开业致辞
2015/08/01 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
MongoDB使用场景总结
2022/02/24 MongoDB