拖动Html元素集合 Drag and Drop any item


Posted in Javascript onDecember 22, 2006

<style content="text/css">
li {
  MARGIN-BOTTOM: 10px
}
ul {
  MARGIN-TOP: 5px
}
.DragContainer {
  BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
  BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
  BACKGROUND-COLOR: #eee
}
.DragBox {
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
  BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
  BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
  FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
  FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
  PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
  FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
  BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
  FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}
pre{border:1 solid #CCC;background-color:#F8F8F0;padding:10px;}
</style>
<script content="text/javascript">

// iMouseDown represents the current mouse button state: up or down
/*
lMouseState represents the previous mouse button state so that we can
check for button clicks and button releases:

if(iMouseDown && !lMouseState) // button just clicked!
if(!iMouseDown && lMouseState) // button just released!
*/
var mouseOffset = null;
var iMouseDown = false;
var lMouseState = false;
var dragObject = null;

// Demo 0 variables
var DragDrops = [];
var curTarget = null;
var lastTarget = null;
var dragHelper = null;
var tempDiv = null;
var rootParent = null;
var rootSibling = null;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function CreateDragContainer(){
  /*
  Create a new "Container Instance" so that items from one "Set" can not
  be dragged into items from another "Set"
  */
  var cDrag = DragDrops.length;
  DragDrops[cDrag] = [];

  /*
  Each item passed to this function should be a "container". Store each
  of these items in our current container
  */
  for(var i=0; i<arguments.length; i++){
    var cObj = arguments[i];
    DragDrops[cDrag].push(cObj);
    cObj.setAttribute('DropObj', cDrag);

    /*
    Every top level item in these containers should be draggable. Do this
    by setting the DragObj attribute on each item and then later checking
    this attribute in the mouseMove function
    */
    for(var j=0; j<cObj.childNodes.length; j++){

      // Firefox puts in lots of #text nodes...skip these
      if(cObj.childNodes[j].nodeName=='#text') continue;

      cObj.childNodes[j].setAttribute('DragObj', cDrag);
    }
  }
}

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 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 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);

  // mouseOut event - fires if the item the mouse is on has changed
  if(lastTarget && (target!==lastTarget)){
    // reset the classname for the target element
    var origClass = lastTarget.getAttribute('origClass');
    if(origClass) lastTarget.className = origClass;
  }

  /*
  dragObj is the grouping our item is in (set from the createDragContainer function).
  if the item is not in a grouping we ignore it since it can't be dragged with this
  script.
  */
  var dragObj = target.getAttribute('DragObj');

   // if the mouse was moved over an element that is draggable
  if(dragObj!=null){

    // mouseOver event - Change the item's class if necessary
    if(target!=lastTarget){
      var oClass = target.getAttribute('overClass');
      if(oClass){
        target.setAttribute('origClass', target.className);
        target.className = oClass;
      }
    }

    // if the user is just starting to drag the element
    if(iMouseDown && !lMouseState){
      // mouseDown target
      curTarget = target;

      // Record the mouse x and y offset for the element
      rootParent = curTarget.parentNode;
      rootSibling = curTarget.nextSibling;

      mouseOffset = getMouseOffset(target, ev);

      // We remove anything that is in our dragHelper DIV so we can put a new item in it.
      for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);

      // Make a copy of the current item and put it in our drag helper.
      dragHelper.appendChild(curTarget.cloneNode(true));
      dragHelper.style.display = 'block';

      // set the class on our helper DIV if necessary
      var dragClass = curTarget.getAttribute('dragClass');
      if(dragClass){
        dragHelper.firstChild.className = dragClass;
      }

      // disable dragging from our helper DIV (it's already being dragged)
      dragHelper.firstChild.removeAttribute('DragObj');

      /*
      Record the current position of all drag/drop targets related
      to the element. We do this here so that we do not have to do
      it on the general mouse move event which fires when the mouse
      moves even 1 pixel. If we don't do this here the script
      would run much slower.
      */
      var dragConts = DragDrops[dragObj];

      /*
      first record the width/height of our drag item. Then hide it since
      it is going to (potentially) be moved out of its parent.
      */
      curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth));
      curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));
      curTarget.style.display = 'none';

      // loop through each possible drop container
      for(var i=0; i<dragConts.length; i++){
        with(dragConts[i]){
          var pos = getPosition(dragConts[i]);

          /*
          save the width, height and position of each container.

          Even though we are saving the width and height of each
          container back to the container this is much faster because
          we are saving the number and do not have to run through
          any calculations again. Also, offsetHeight and offsetWidth
          are both fairly slow. You would never normally notice any
          performance hit from these two functions but our code is
          going to be running hundreds of times each second so every
          little bit helps!

          Note that the biggest performance gain here, by far, comes
          from not having to run through the getPosition function
          hundreds of times.
          */
          setAttribute('startWidth', parseInt(offsetWidth));
          setAttribute('startHeight', parseInt(offsetHeight));
          setAttribute('startLeft', pos.x);
          setAttribute('startTop', pos.y);
        }

        // loop through each child element of each container
        for(var j=0; j<dragConts[i].childNodes.length; j++){
          with(dragConts[i].childNodes[j]){
            if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;

            var pos = getPosition(dragConts[i].childNodes[j]);

            // save the width, height and position of each element
            setAttribute('startWidth', parseInt(offsetWidth));
            setAttribute('startHeight', parseInt(offsetHeight));
            setAttribute('startLeft', pos.x);
            setAttribute('startTop', pos.y);
          }
        }
      }
    }
  }

  // If we get in here we are dragging something
  if(curTarget){
    // move our helper div to wherever the mouse is (adjusted by mouseOffset)
    dragHelper.style.top = mousePos.y - mouseOffset.y;
    dragHelper.style.left = mousePos.x - mouseOffset.x;

    var dragConts = DragDrops[curTarget.getAttribute('DragObj')];
    var activeCont = null;

    var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);
    var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);

    // check each drop container to see if our target object is "inside" the container
    for(var i=0; i<dragConts.length; i++){
      with(dragConts[i]){
        if(((getAttribute('startLeft')) < xPos) &&
          ((getAttribute('startTop')) < yPos) &&
          ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&
          ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){

            /*
            our target is inside of our container so save the container into
            the activeCont variable and then exit the loop since we no longer
            need to check the rest of the containers
            */
            activeCont = dragConts[i];

            // exit the for loop
            break;
        }
      }
    }

    // Our target object is in one of our containers. Check to see where our div belongs
    if(activeCont){
      // beforeNode will hold the first node AFTER where our div belongs
      var beforeNode = null;

      // loop through each child node (skipping text nodes).
      for(var i=activeCont.childNodes.length-1; i>=0; i--){
        with(activeCont.childNodes[i]){
          if(nodeName=='#text') continue;

          // if the current item is "After" the item being dragged
          if(
            curTarget != activeCont.childNodes[i] &&
            ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&
            ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){
              beforeNode = activeCont.childNodes[i];
          }
        }
      }

      // the item being dragged belongs before another item
      if(beforeNode){
        if(beforeNode!=curTarget.nextSibling){
          activeCont.insertBefore(curTarget, beforeNode);
        }

      // the item being dragged belongs at the end of the current container
      } else {
        if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){
          activeCont.appendChild(curTarget);
        }
      }

      // make our drag item visible
      if(curTarget.style.display!=''){
        curTarget.style.display = '';
      }
    } else {

      // our drag item is not in a container, so hide it.
      if(curTarget.style.display!='none'){
        curTarget.style.display = 'none';
      }
    }
  }

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

  // mouseMove target
  lastTarget = target;

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

  // this helps prevent items on the page from being highlighted while dragging
  return false;
}

function mouseUp(ev){
  if(curTarget){
    // hide our helper object - it is no longer needed
    dragHelper.style.display = 'none';

    // if the drag item is invisible put it back where it was before moving it
    if(curTarget.style.display == 'none'){
      if(rootSibling){
        rootParent.insertBefore(curTarget, rootSibling);
      } else {
        rootParent.appendChild(curTarget);
      }
    }

    // make sure the drag item is visible
    curTarget.style.display = '';
  }
  curTarget = null;
  iMouseDown = false;
}

function mouseDown(){
  iMouseDown = true;
  if(lastTarget){
    return false;
  }
}

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

window.onload = function(){
  // Create our helper object that will show the item while dragging
  dragHelper = document.createElement('DIV');
  dragHelper.style.cssText = 'position:absolute;display:none;';

  CreateDragContainer(
    document.getElementById('DragContainer1'),
    document.getElementById('DragContainer2'),
    document.getElementById('DragContainer3')
  );

  document.body.appendChild(dragHelper);
}

</script>

<!--the mouse over and dragging class are defined on each item-->

<div class="DragContainer" id="DragContainer1">
  <div class="DragBox" id="Item1" overClass="OverDragBox" dragClass="DragDragBox">Item #1</div>
  <div class="DragBox" id="Item2" overClass="OverDragBox" dragClass="DragDragBox">Item #2</div>
  <div class="DragBox" id="Item3" overClass="OverDragBox" dragClass="DragDragBox">Item #3</div>
  <div class="DragBox" id="Item4" overClass="OverDragBox" dragClass="DragDragBox">Item #4</div>
</div>
<div class="DragContainer" id="DragContainer2">
  <div class="DragBox" id="Item5" overClass="OverDragBox" dragClass="DragDragBox">Item #5</div>
  <div class="DragBox" id="Item6" overClass="OverDragBox" dragClass="DragDragBox">Item #6</div>
  <div class="DragBox" id="Item7" overClass="OverDragBox" dragClass="DragDragBox">Item #7</div>
  <div class="DragBox" id="Item8" overClass="OverDragBox" dragClass="DragDragBox">Item #8</div>
</div>
<div class="DragContainer" id="DragContainer3">
  <div class="DragBox" id="Item9" overClass="OverDragBox" dragClass="DragDragBox">Item #9</div>
  <div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div>
  <div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div>
  <div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox">Item #12</div>
</div>

Javascript 相关文章推荐
jquery live()调用不存在的解决方法
Feb 26 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
深入理解node.js http模块
Jan 24 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
拖动一个HTML元素
Dec 22 #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
You might like
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP getName()函数讲解
2019/02/03 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
JS求平均值的小例子
2013/11/29 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
python 怎样进行内存管理
2020/11/10 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
九一八事变演讲稿
2014/09/05 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
教务处教学工作总结
2015/08/10 职场文书
《日月潭》教学反思
2016/02/20 职场文书