Implementación de arrastrar y soltar en elementos relativamente posicionados en JavaScript

Question

Feb 24, 2011, 11:45 PM

Implementación de arrastrar y soltar en elementos relativamente posicionados en JavaScript

Me disculpo por publicar tantas preguntas, ¡todavía estoy aprendiendo! Entonces, puedo arrastrar y soltar el primer elemento en el html sin problema; sin embargo, cuando trato de arrastrar y soltar el segundo, aparecebastant debajo del mouse. Todavía se arrastra donde muevo el mouse, pero muy por debajo. ¿Qué pasa?

Aquí está el javascript:

// JavaScript Document

var posX;
var posY;
var element;

document.addEventListener("mousedown", drag, false);

function drag(event) {
    if(event.target.className == "square") {
        element = event.target;
        posX = event.clientX -parseInt(element.offsetLeft);
        posY = event.clientY -parseInt(element.offsetTop);
        document.addEventListener("mousemove", move, false);
    }
}

function move(event) {

    if (typeof(element.mouseup) == "undefined")
        document.addEventListener("mouseup", drop, false);
    //Prevents redundantly adding the same event handler repeatedly

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}    

function drop() {
    document.removeEventListener("mousemove", move, false);
    document.removeEventListener("mouseup", drop, false);
    //alert("DEBUG_DROP");
}

Aquí está el html:

<body>

<p class="square">Thing One</p>
<p class="square">Thing Two</p>

</body>

Aquí está el CSS:

/* CSS Document */

.square {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}

p {
    padding: 0px;
    margin: 0px;
}

¡Gracias por su tiempo a todos! ¡Lo aprecio mucho!