拖拽内容

head:

<script type="text/javascript">
    /**//************************************************************************************************************
    (C) www.dhtmlgoodies.com, January 2006
    
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.    
    
    Terms of use:
    You are free to use this script as long as the copyright message is kept intact. However, you may not
    redistribute, sell or repost it without our permission.
    
    Thank you!
    
    www.dhtmlgoodies.com
    Alf Magne Kalleland
    
    ************************************************************************************************************/    
        
    var dragObjArray = new Array();
    var dragObjCloneArray = new Array();
    var numericIdToBeDragged = false;
    var dragDropTimer = -1;
    
    var mouse_x;
    var mouse_y;
    
    var el_x;
    var el_y;
    
    var currentZIndex = 10000;
    var dragableElementMoved = new Array();
    
    function getTopPos(inputObj)
    {        
      var returnValue = inputObj.offsetTop;
      while((inputObj = inputObj.offsetParent) != null){
          if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
      }
      return returnValue;
    }
    
    function getLeftPos(inputObj)
    {
      var returnValue = inputObj.offsetLeft;
      while((inputObj = inputObj.offsetParent) != null){
          if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
      }
      return returnValue;
    }
        
    function initDragDropElement(e)
    {
        if(document.all)e = event;
        numericIdToBeDragged = this.className.replace(/[^0-9]/g,'');
        dragDropTimer=0;
        mouse_x = e.clientX;
        mouse_y = e.clientY;
        
        currentZIndex = currentZIndex + 1;
        
        dragObjCloneArray[numericIdToBeDragged].style.zIndex = currentZIndex;
        
        if(!dragableElementMoved[numericIdToBeDragged]){
            dragObjCloneArray[numericIdToBeDragged].style.top = getTopPos(dragObjArray[numericIdToBeDragged]) + 'px';
            dragObjCloneArray[numericIdToBeDragged].style.left = getLeftPos(dragObjArray[numericIdToBeDragged]) + 'px';
        }                
        el_x = dragObjCloneArray[numericIdToBeDragged].style.left.replace('px','')/1;
        el_y = dragObjCloneArray[numericIdToBeDragged].style.top.replace('px','')/1;

        
        timerDragDropElement();
        return false;
    }
    
    function timerDragDropElement()
    {
        if(dragDropTimer>=0 && dragDropTimer<10){
            dragDropTimer = dragDropTimer + 1;
            setTimeout('timerDragDropElement()',5);
            return;            
        }
        if(dragDropTimer>=10){
            if(dragObjCloneArray[numericIdToBeDragged].style.display=='none'){
                dragObjArray[numericIdToBeDragged].style.visibility = 'hidden';
                dragObjCloneArray[numericIdToBeDragged].style.display = 'block';
                dragObjCloneArray[numericIdToBeDragged].style.visibility = 'visible';
                dragObjCloneArray[numericIdToBeDragged].style.top = getTopPos(dragObjArray[numericIdToBeDragged]) + 'px';
                dragObjCloneArray[numericIdToBeDragged].style.left = getLeftPos(dragObjArray[numericIdToBeDragged]) + 'px';
                dragableElementMoved[numericIdToBeDragged] = true;    
            }
        }        
    }
    
    function cancelEvent()
    {
        return false;
    }
    
    function cancelSelectionEvent()
    {
        if(dragDropTimer>=0)return false;
        return true;
    }
    
    function moveDragableElement(e)
    {
        if(document.all)e = event;        
        if(dragDropTimer<10)return;    
        dragObjCloneArray[numericIdToBeDragged].style.left = (e.clientX - mouse_x + el_x) + 'px'; 
        dragObjCloneArray[numericIdToBeDragged].style.top = (e.clientY - mouse_y + el_y) + 'px'; 
    }
    
    function stop_dragDropElement()
    {
        dragDropTimer = -1;
        numericIdToBeDragged = false;
    }
    
    
    function initdragableElements()
    {
        var tmpElements = new Array();
        var allObjects = document.getElementsByTagName('*');
        for(var no=0;no<allObjects.length;no++){
            if(allObjects[no].className=='dragableElement'){
                allObjects[no].style.cursor = 'move';
                tmpElements[tmpElements.length] = allObjects[no];
            }
        }
        
        for(var no=0;no<tmpElements.length;no++){
            var el = tmpElements[no].cloneNode(true);
            tmpElements[no].className='dragableElement' + no;
            
            el.onmousedown = initDragDropElement;
            el.className='dragableElementClone' + no;            
            el.style.position='absolute';
            el.style.display='none';
            el.style.visibility='hidden';
            
            el.style.top = getTopPos(tmpElements[no]) + 'px';
            el.style.left = getLeftPos(tmpElements[no]) + 'px';
            tmpElements[no].parentNode.insertBefore(el,tmpElements[no]);
            tmpElements[no].onmousedown = initDragDropElement;
            
            dragObjArray[no] = tmpElements[no]; 
            dragObjCloneArray[no] = el; 
        }
        
        document.body.onmousemove = moveDragableElement;
        document.body.onmouseup = stop_dragDropElement;
        document.body.onselectstart = cancelSelectionEvent;
        document.body.ondragstart = cancelEvent;
    }
    window.onload = initdragableElements;
    </script>

body:

<!-- 
    PUT YOUR OWN HTML CONTENT IN HERE. 
    ASSIGN THE ELEMENTS YOU WANT TO BE DRAGABLE TO THE CLASS "dragableElement". 
    
    Example:
    
    <img src="images/image1.jpg" style="float:left" class="dragableElement">

-->