拖动一个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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
form中限制文本字节数js代码
Jun 10 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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 缓存实现代码及详细注释
2010/05/16 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
Javascript的一种模块模式
2008/03/22 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
利用Python如何生成便签图片详解
2018/07/09 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
行政文员岗位职责
2013/11/08 职场文书
水利学院求职自荐书
2014/02/01 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
村居抓节水倡议书
2014/05/19 职场文书
本科生就业推荐信
2014/05/19 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
python基础之匿名函数详解
2021/04/21 Python