Small squares made with CSS and JS that can be dragged on a webpage at will.
<P style = "width: 140px; height: 140px; background-color: pink; cursor: pointer;" id = "pBlock" onmousedown = "pBlock_event_mousedown (arguments [0]); "> </p> script function pBlock_event_mousedown (e) {var e, obj, temp; obj = document. getElementById ("pBlock"); e = window. event? Window. event: e; obj. startX = e. clientX-obj.offsetLeft; obj. startY = e. clientY-obj.offsetTop; document. onmousemove = document_event_mousemove; temp = document. attachEvent? Document. attachEvent ("onmouseup", document_event_mouseup): document. addEventListener ("mouseup", document_event_mouseup, "");} function document_event_mousemove (e) {var e, obj; obj = document. getElementById ("pBlock"); e = window. event? Window. event: e; with (obj. style) {position = "absolute"; left = e. clientX-obj.startX + "px"; top = e. clientY-obj.startY + "px";} function document_event_mouseup (e) {var temp; document. onmousemove = ""; temp = document. detachEvent? Document. detachEvent ("onmouseup", document_event_mouseup): document. removeEventListener ("mouseup", document_event_mouseup, "");} script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]