JavaScript CSS 수정 학습 6장 드래그 앤 드롭_기본 지식

dragDrop.initElement('test');<br>dragDrop.initElement(document.getElementById('test2'));

dragDrop = {
    keyHTML: '#',
    keySpeed: 10, // 키 누름당 픽셀 이벤트
    initialMouseX: 정의되지 않음,
    initialMouseY: 정의되지 않음,
    startX: 정의되지 않음,
    startY: 정의되지 않음,
    dXKeys: 정의되지 않음,
    dYKeys: 정의되지 않음,
    daggedObject: 정의되지 않음 ,
    initElement: 함수(요소) {
        if (요소 유형 == '문자열')
            요소 = document.getElementById(요소);
        element.onmousedown = dragDrop.startDragMouse;
        element.innerHTML = dragDrop.keyHTML;
        varlinks = element.getElementsByTagName('a');
        var lastLink = 링크[links.length-1];
        lastLink.관련Element = 요소;
        lastLink.onclick = dragDrop.startDragKeys;
    },
    startDragMouse: function (e) {
        dragDrop.startDrag(this);
        var evt = e || 창.이벤트;
        dragDrop.initialMouseX = evt.clientX;
        dragDrop.initialMouseY = evt.clientY;
        addEventSimple(document,'mousemove',dragDrop.dragMouse);
        addEventSimple(document,'mouseup',dragDrop.releaseElement);
        false를 반환합니다.
    },
    startDragKeys: function () {
        dragDrop.startDrag(this.관련Element);
        dragDrop.dXKeys = dragDrop.dYKeys = 0;
        addEventSimple(document,'keydown',dragDrop.dragKeys);
        addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
        this.blur();
        false를 반환합니다.
    },
    startDrag: function (obj) {
        if (dragDrop.draggedObject)
            dragDrop.releaseElement();
        dragDrop.startX = obj.offsetLeft;
        dragDrop.startY = obj.offsetTop;
        dragDrop.draggedObject = obj;
        obj.className = '끌어옴';
    },
    dragMouse: function (e) {
        var evt = e || 창.이벤트;
        var dX = evt.clientX - dragDrop.initialMouseX;
        var dY = evt.clientY - dragDrop.initialMouseY;
        dragDrop.setPosition(dX,dY);
        false를 반환합니다.
    },
    드래그 키: function(e) {
        var evt = e || 창.이벤트;
        var key = evt.keyCode;
        스위치(키) {
            case 37:    // left
            case 63234:
              dragDrop.dXKeys -= dragDrop.keySpeed;
                휴식;
            case 38:    // up
            case 63232:
               dragDrop.dYKeys -= dragDrop.keySpeed;
                휴식;
            case 39:    // 오른쪽
            case 63235:
               dragDrop.dXKeys = dragDrop.keySpeed;
                휴식;
            case 40:    // down
            case 63233:
               dragDrop.dYKeys = dragDrop.keySpeed;
                휴식;
            사례 13:     // 입력
            사례 27:     // 이스케이프
               dragDrop.releaseElement();
                false를 반환합니다.
            기본값:
                true를 반환합니다.
        }
        dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);
        if (evt.preventDefault)
            evt.preventDefault();
        false를 반환합니다.
    },
    setPosition: function (dx,dy) {
        dragDrop.draggedObject.style.left = dragDrop.startX dx 'px';
        dragDrop.draggedObject.style.top = dragDrop.startY dy 'px';
    },
    switchKeyEvents: function () {
        // Opera 및 Safari 1.3용
        removeEventSimple(document,'keydown',dragDrop.dragKeys);
        removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
        addEventSimple(document,'keypress',dragDrop.dragKeys);
    },
    releaseElement: function() {
        removeEventSimple(document,'mousemove',dragDrop.dragMouse);
        removeEventSimple(document,'mouseup',dragDrop.releaseElement);
        removeEventSimple(document,'keypress',dragDrop.dragKeys);
        removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
        removeEventSimple(document,'keydown',dragDrop.dragKeys);
        dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
        dragDrop.draggedObject = null;
    }
}

initElement: function ( element) {
if (typeof element == 'string')
element = document.getElementById(element)
element.onmousedown = dragDrop.startDragMouse
element.innerHTML = dragDrop.keyHTML;
var link = element.getElementsByTagName('a');
var lastLink =links[links.length-1]
lastLink.관련Element = 요소
lastLink.onclick = dragDrop.startDragKeys;
},

startDrag: function(obj) {
if ( dragDrop.draaggedObject)
dragDrop.releaseElement();
dragDrop.startX = obj.offsetLeft;
dragDrop.startY = obj.offsetTop;
dragDrop.draggedObject = obj; obj.className = 'dragged';
},

setPosition: function (dx,dy) {
dragDrop.draggedObject.style.left = dragDrop.startX dx 'px'
dragDrop.draggedObject.style.top = dragDrop.startY dy 'px ';
},


이 함수는 마우스와 키보드 움직임으로 계산된 dX, dY와 초기 위치를 사용하여 요소의 새 위치를 설정합니다.
이 부분은 매우 간단합니다. 복잡한 부분은 dx와 dy의 획득에 있습니다. 마우스 부분과 키보드 부분의 처리가 매우 다릅니다.

마우스 부품 코드
마우스 부품 계산은 키보드 계산보다 복잡하지만 브라우저 호환성 측면에서는 큰 문제가 없습니다. 그럼 마우스 부분부터 시작하겠습니다.
이벤트
먼저 이벤트에 대해 이야기해보겠습니다. 분명히 객체 선택, 드래그 및 드래그 작업을 완료하려면 드래그 프로세스 중에 mousedown, mousemove 및 mouseup이 필요합니다.
이 일련의 이벤트는 요소를 드래그해야 하는 mousedown 이벤트로 시작됩니다. 따라서 모든 드래그 요소에는 드래그가 시작되었음을 나타내기 위해 이 이벤트가 필요합니다.
그러나 mousemove 및 mouseup 이벤트는 요소에 설정해서는 안 되며 문서 전체에 설정해야 합니다. 사용자가 마우스를 빠르고 정신없이 움직일 수 있고 드래그한 요소를 잃을 수 있기 때문입니다. 요소에 설정하면 해당 요소 위에 마우스가 없기 때문에 제어가 불가능할 수 있는데, 이는 사용성 측면에서 좋지 않습니다.
문서에 mousemove와 mouseup을 설정하면 이런 문제는 발생하지 않습니다. 마우스가 어디에 있든 요소는 mousemove 및 mouseup에 응답합니다. 이것은 사용하기 매우 쉽습니다.
또한 드래그가 시작된 후에만 mousemove 및 mouseup을 설정할 수 있으며, 사용자가 요소를 놓을 때 삭제할 수 있습니다. 이 코드는 매우 깔끔하고 시스템 리소스를 절약해 줍니다. 왜냐하면 mousemove는 많은 시스템 리소스를 소비하기 때문입니다.
Mousedown
드래그 요소에서 mousedown 이벤트가 발생하면 startDragMouse 함수가 실행되기 시작합니다.

먼저 앞서 논의한 startDrag가 실행됩니다. 그런 다음 마우스의 좌표를 찾아 이를initialMouseX 및initialMouseY에 저장합니다. 나중에 마우스 위치를 이것과 비교해 보겠습니다.

마지막으로 기본 마우스 이벤트인 텍스트 선택을 방지하는 데 사용되는 false가 반환됩니다. 우리는 더 이상 드래그할 때 텍스트가 선택되는 것을 원하지 않습니다. 이는 성가신 일입니다.

그런 다음 문서에 대한 mouseup 및 mousemove 이벤트 핸들러를 설정합니다. 문서에 자체적인 mouseup 및 mousemove 이벤트 핸들러가 있을 가능성이 있으므로 addEventSimple 함수를 사용하여 원래 이벤트 핸들러가 실패하는 것을 방지합니다.

Mousemove
이제 사용자가 마우스를 움직일 때 dragMouse 함수가 실행됩니다.