Draggable without jQuery ui
How to make an item draggable without using jQuery UI?
I have this code:
<script type="text/javascript"> function show_coords(event) { var x=event.clientX; var y=event.clientY; var drag=document.getElementById('drag'); drag.style.left=x; drag.style.top=y } </script> <body style="height:100%;width:100%" onmousemove="show_coords(event)"> <p id="drag" style="position:absolute">drag me</p> </body> The problem is that I want to drag while the user clicks. I tried onmousedown , but the results were negative.
+4
1 answer
It will be quite easy as you get the concept.
function enableDragging(ele) { var dragging = dragging || false, //Setup a bunch of variables x, y, Ox, Oy, enableDragging.z = enableDragging.z || 1, current; ele.onmousedown = function(ev) { //When mouse is down current = ev.target; dragging = true; //It is dragging time x = ev.clientX; //Get mouse X and Y and store it y = ev.clientY; // for later use. Ox = current.offsetLeft; //Get element position Oy = current.offsetTop; current.style.zIndex = ++enableDragging.z; //z-index thing window.onmousemove = function(ev) { if (dragging == true) { //when it is dragging var Sx = ev.clientX - x + Ox, //Add the difference between Sy = ev.clientY - y + Oy; // 2 mouse position to the current.style.top = Sy + "px"; // element. current.style.left = Sx + "px"; return false; //Don't care about this. } }; window.onmouseup = function(ev) { dragging && (dragging = false); //Mouse up, dragging done! } }; } enableDragging(document.getElementById("drag")); //draggable now! var ele = document.getElementsByTagName("div"); for(var i = 0; i < ele.length; i++){ //Every div is draggable enableDragging(ele[i]); // (only when its "position" } // is set to "absolute" or // "relative") http://jsfiddle.net/DerekL/NWU9G/
The reason your code does not work is because the <div> will always follow the cursor and you donβt drag it. The upper left corner will always follow your cursor, and we did not want this.
UPDATE
Now, if you only need a grabber or something similar, just change this part of the script:
ele.onmousedown = function(ev) { current = ev.target; to
var grabber = document.createElement("div"); grabber.setAttribute("class", "grabber"); ele.appendChild(grabber); grabber.onmousedown = function(ev) { current = ev.target.parentNode; Now you can only click on the capture to start the drag and drop process.
+7