Ho creato questa funzione per il drag and drop, che però ha un difetto:
(non badate agli addToEvent)
codice:
//Funzioni per calcolare e settare le coordinate-----------
function targetObj(evt) {
return evt.target||evt.srcElement;
}
function coordX(evt) {
return evt.pageX||evt.clientX+document.body.scrollLeft;
}
function coordY(evt) {
return evt.pageY||evt.clientY+document.body.scrollTop
}
function setPosition(evt, el) {
el.style.left=parseInt(el.style.left)+coordX(evt)-el.preX;
el.style.top=parseInt(el.style.top)+coordY(evt)-el.preY;
}
//Funzioni per gestire gli eventi---------------------------------
function draggableDown(evt, el) {
evt=evt||window.event;
el.dragFlag=1;
el.preX=coordX(evt);
el.preY=coordY(evt);
}
function draggableMove(evt, el) {
if(el.dragFlag)
{
evt=evt||window.event;
setPosition(evt, el);
el.preX=coordX(evt);
el.preY=coordY(evt);
}
}
//MAKEDRAGGABLE----------------------------------------------
function makeDraggable(posTarg, handlers) {
var elemento=this;
elemento.style.left=posTarg=="absolute"?elemento.offsetLeft:0;
elemento.style.top=posTarg=="absolute"?elemento.offsetTop:0;
elemento.style.position=posTarg;
}
//Aggiungi eventi a document-----------------------------------
document.addToEvent("mousedown", function(e) {
draggableDown(e, targetObj(e));
document.addToEvent("mousemove", function(e) {
draggableMove(e, targetObj(e))
});
});
document.addToEvent("mouseup", function(e) {
targetObj(e).dragFlag=0;
});
Di cui trovate un esempio in una pagina di prova
Il problema ( potete provare pure voi ) è che se si muove il mouse troppo velocemente l'oggetto viene "sganciato".
Succede sia con IE che con FF e Opera.
Ho provato con return false e vari ma non ho trovato la soluzione al problema.