更改js中的按鈕順序

Question

我有一系列固定高度和寬度的按鈕，這些按鈕需要在父div內的任何位置可拖動和放置。

根據客戶端請求，我不能使用任何外部庫，meh ...我可以在幾秒鐘內用jQuery做到這一點，但是，我想這是它的一個缺點：你不能學習更多的基本東西...

我該怎麼去做呢？一個問題是，這些按鈕是在一個div也是可拖動的，所以我需要小心定位，我只能使用相對。

任何想法如何我可以去做呢？提前致謝。

Answer 1

Peter-Paul Koch寫了一個excellent how-to on drag and drop。我只記得通過寫我自己的方式3/4，所以我wrapped that up in a fiddle。

function makeDraggable(draggable, container){ 
    // In case you don't want to have a container 
    var container = container || window; 
    // So we know what to do on mouseup: 
    // At this point we're not sure the user wants to drag 
    var dragging = false; 

     // The movement listener and position modifier 
     function dragHandler(moveEvent){ 
      moveEvent.preventDefault(); 

      dragging  = true; 

      // Ascertain where the mouse is 
      var coordinates = [ 
        moveEvent.clientX, 
        moveEvent.clientY 
      ]; 

      // Style properties we need to apply to the element 
      var styleValues = { 
        position : 'absolute', 
        left  : coordinates[0] + 'px', 
        top  : coordinates[1] + 'px' 
      }; 

      // Apply said styles 
      for(property in styleValues){ 
        if(styleValues.hasOwnProperty(property)){ 
          draggable.style[property] = styleValues[property]; 
        } 
      } 
    } 

    function dropHandler(upEvent){ 
     // Only interfere if we've had a drag event 
     if(dragging === true){ 
      // We don't want the button click event to fire! 
      upEvent.preventDefault(); 

      // We don't want to listen for drag and drop until this is clicked again 
      container.removeEventListener('mousemove', dragHandler, false); 
      draggable.removeEventListener('mouseup', dropHandler, false); 

      dragging = false; 
     } 
    } 

    // Where all the fun happens 
    draggable.addEventListener('mousedown', function dragListener(downEvent){ 
     downEvent.preventDefault(); 

     // The drag event 
     container.addEventListener('mousemove', dragHandler, false); 

     // The end of drag, if dragging occurred 
     draggable.addEventListener('mouseup', dropHandler, false); 
    }, false); 
}​