拖动一个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 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
JS中操作JSON总结
Dec 06 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
JS实现放烟花效果
Mar 10 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
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
js 动态选中下拉框
2009/11/26 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
js图片预加载示例
2014/04/30 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
详解python单例模式与metaclass
2016/01/15 Python
python装饰器与递归算法详解
2016/02/18 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
django fernet fields字段加密实践详解
2019/08/12 Python
Django分组聚合查询实例分享
2020/04/29 Python
python 装饰器的使用示例
2020/10/10 Python
django中cookiecutter的使用教程
2020/12/03 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
医学求职自荐信
2014/06/21 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
Redis如何实现分布式锁
2021/08/23 Redis