Full version: jsB@nk » Snippet » Dragable and Dropable Object by className
URL: https://www.javascriptbank.com/dragable-and-dropable-object-by-classname.html
This script uses className to make drag and drop feature for objects as dragable div, dragable layer. Very easy to use and customize.
Full version: jsB@nk » Snippet » Dragable and Dropable Object by className
URL: https://www.javascriptbank.com/dragable-and-dropable-object-by-classname.html
<style type="text/css">.drag { width: 200px; height: 200px; position: absolute; border: 1px solid black; background: silver}</style><script type="text/javascript" name="dragAndDrop.js">// Created by: Michael Burt :: http://mburt.funpic.orgvar ie = document.allvar ns = document.getElementById && !iefunction dragbyclass(e) { var fobj = ns ? e.target : event.srcElement if (fobj.tagName=="DIV" && fobj.className=="drag") { var ev=e||event var offsetx=ev.clientX-fobj.offsetLeft var offsety=ev.clientY-fobj.offsetTop document.onmousemove=function() { fobj.style.left=ev.clientX-offsetx fobj.style.top=ev.clientY-offsety return false } fobj.onmouseup=function() { document.onmousemove=null } }}document.onmousedown=dragbyclass;</script><div class="drag" style="left:40px;top:60px;z-index:100">Drag number ONE</div><div class="drag" style="left:40px;top:60px">Drag number TWO</div>