JavaScript - Dragable/dropable
Does anyone know of a way to have a dragable/movable image remain where the user put it even after reload/refresh?
Code: var object = null; var cX = 0; var cY = 0; function initPage () { document.onmousedown = lift; document.onmousemove = drag; document.onmouseup = drop; } function lift(evt) { var evt = (evt) ? evt : ((window.event) ? window.event : null); var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null); if (objectID.indexOf('puzzlepcs')!=-1) object = document.getElementById (objectID); if (object) { object.style.zIndex = 100; cX = evt.clientX - object.offsetLeft; cY = evt.clientY - object.offsetTop; return; } else { object = null; return; }} function drag(evt) { evt = (evt) ? evt : ((window.event) ? window.event : null); if (object) { object.style.left = evt.clientX - cX + 'px'; object.style.top = evt.clientY - cY + 'px'; return false; }} function drop() { if (object) { object.style.zIndex = 0; object = null; return false; } } window.onLoad=initPage() Thanks in advance for any assistance Cutter Similar TutorialsI have 2 questions. Can I have draggable editable images? I can make my images movable around the page, but I would like to be able to make the images editable and have the text follow the images. I would like to either have a drop down menu or buttons that can make the images displayed on the page then edit them and move them to my map location on the page. Is this possible, and thanks for any help guys. Here is the code I used for the movable images. Code: <img src="images/loconorth.gif" class="dragableElement" style="float:left"> <img src="images/locosouth.gif" class="dragableElement" style="float:left"> <img src="images/Loco east.png" width="80" height="36" class="dragableElement" style="float:right"> <p> <p><img src="images/Loco west.png" width="80" height="36" class="dragableElement" style="float:left"> |