FF/IE 마우스 드래그 앤 드랍 및 이벤트 캡쳐

파이어폭스에서의 마우스 드래그 앤 드랍 및 이벤트 캡쳐

document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=mousdownMo;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveing<>
document.captureEvents(Event.MOUSEUP);
document.onmouseup = mousupMo;


function mousdownMo(event) {
    if (event.which != 1) {
        return false;
    } else {
        if (event.target.className == 'drag') {
            mousdown = true;
            x = event.clientX;
            y = event.clientY;
        }
    }
}

function mousupMo(event) {
    mousdown = false;
}

function moveingMo(event) {
    if (mousdown) {
        var distX = event.clientX - x;
        var distY = event.clientY - y;
        event.target.style.left = parseInt(event.target.style.left) + distX;
        event.target.style.top = parseInt(event.target.style.top) + distY;
        x = event.clientX;
        y = event.clientY;
        return false;
    }
}

Internet Explorer에서의 마우스 드래그 앤 드랍 및 이벤트 캡쳐

document.onmousedown = mousdownIe;
document.onmouseup = mmousupIe;
document.onmousemove = moveingIe;


function mousdownIe() {
    if (event.srcElement.className == 'drag') {
        mousdown = true;
        x = event.clientX;
        y = event.clientY;
    }
}

function mousupIe() {
    mousdown = false;
}

function moveingIe() {
    if (mousdown) {
        var distX = event.clientX - x;
        var distY = event.clientY - y;
        event.srcElement.style.left = parseInt(event.srcElement.style.left) + distX;
        event.srcElement.style.top = parseInt(event.srcElement.style.top) + distY;
        x = event.clientX;
        y = event.clientY;
        return false;
    }
}

.drag { position: absolute; cursor:move }