拖动一个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 Base64 加密解密
Dec 28 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
详解用async/await来处理异步
Aug 28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php compact 通过变量创建数组
2016/11/15 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Javascript模板技术
2007/04/27 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
js继承的实现代码
2010/08/05 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python re模块介绍
2014/11/30 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python实现用户答题功能
2018/01/17 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
学术会议主持词
2014/03/17 职场文书
三方协议书范本
2014/04/22 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书