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