拖动一个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 CSS修改学习第三章 修改样式表
Feb 19 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
vue实现选中效果
Oct 07 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
JS实现贪吃蛇游戏
2019/11/15 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python爬取微信公众号文章
2018/08/31 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python3 实现调用串口功能
2019/12/26 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
自我管理的活动方案
2014/08/25 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
Redis高可用集群redis-cluster详解
2022/03/20 Redis