In this tutorial, we will learn to grab and drop divs rather than dragging them, which requires holding down the mouse button. Those of us who use mice all day and do lots of dragging end up with sore fingers and/or thumbs. Such people (we're among them) will appreciate the fact that with this grab and drop method, there is NO holding down anything. Just click, move, click. This helps accessibility, and those with hand injuries/diseases or arthritis or carpal tunnel or fibromyalgia or other neurological problems would appreciate if this became the standard for moving things on computer screens—or at least the co-standard along with drag and drop.

JavaScript Charts, Graphs, Graphics, Circles, Ellipses, Arcs, Lines, and Polygons
Grab and Drop, Not Drag and Drop
Add Ids and onClicks to Divs
Add Ids and onClicks and Grab and Drop to Divs
Make Anti-alias (Almost) Lines
Make Anti-alias (Almost) Lines Using Bresenham's Line Algorithm
Good JavaScript Circle Algorithm
Good JavaScript Ellipse Algorithm
Good JavaScript Arc Algorithm
Make JavaScript Irregular Polygon
JavaScript Area of Irregular Polygon Algorithm
Make Line Chart from User-Inputted Data
Make Line Chart from CSV Data
Make Line Chart from MySQL Table Data
Make Bar Chart from User-Inputted Data
Make Bar Chart from CSV Data
Make Bar Chart from MySQL Table Data
Make Pie Chart from User-Inputted Data
Make Pie Chart from CSV Data
Make Pie Chart from MySQL Table Data

In HTML5, Internet Explorer 9+ (not IE6 through IE8), Firefox, Opera, Chrome, and Safari (Safari 5.1.2), as well as jQuery, support drag and drop. HTML4? Not so much. We tried out this guy's drag and drop, but it only worked on IE8—not recent Firefox or Chrome browsers in 2013. Everyone else used library tools or HTML5 or were having problems with their code. The exception was ppk at quirksmode.org, whose code works but it is quite long. We desired short and sweet. Peter-Paul Koch, the genius at quirksmode.org (who says he's now into mobile), says that ". . . in order to remain accessible for people who cannot use a mouse, the drag and drop should react to the keyboard, too." It does. Kudos to ppk for handling accessibility so nicely. Incidentally, "drag and drop" and "grab and drop" are used interchangeably by some, although on this web page we are using "grab and drop" strictly in the no-drag sense.

What need is there for a grab and drop script? Funny we should ask. Here are three applications that make extensive use of our grab and drop code: Make Pie Chart from User-Inputted Data and Make Pie Chart from CSV Data and Make Pie Chart from MySQL Table Data. It turns out that even though it isn't that hard to make a pie chart, labelling it is anything but straightforward. There are so many factors: how many labels (which corresponds with how many elements are being charted), how many words per label, how large the font is, what position around the circle each label is, and what to do when labels try to overlap. There is a reason that the chart aspect of applications like Excel give users drag and drop capabilities when it comes to labels—especially pie chart labels. A human eyeballing a chart and adjusting label placements is simply more effective than any algorithm. So algorithms take their best shot at labelling effectively, and then humans take over for the final adjustments. Whether drag and drop or grab and drop, a script like the one on this page is essential for some types of apps, and the three pie chart script tutorials mentioned above let you experience why. True, we did not handle accessibility as nicely as ppk, but click move click is much easier than click drag click. See for yourself!

On to the script—which we made as short and sweet as possible. After some simple CSS to style the divs to be grabbed, we define the variables we'll need for the grab and drop. This includes an array of labels that will be placed onto the screen. A couple of solid colored divs will also be included in the clickables, just to show that it doesn't matter what goes in the div—it could be a picture or video or paragraph or iframe.

Next we have the JavaScript function check(). It is called from inside the div we want to move. The code says: if the div we clicked is being carried, we drop it. But if the div we clicked is not being carried, we pick it up. The flag variable is 1 if the div is getting carried and 0 if it is not. It's set up as an on-off switch. The q variable is where the id of the div goes, or "iii" if we haven't grabbed one.

And next we have the function getCoords() run off the onload event in the body tag. The traditional event registration model is used to force the mouse coordinate getting function every time we move the mouse. Note the absence of () after getCoords. Calling the function needs () but registering which event fires
getCoords() requires you NOT to use ().

The getCoords() function itself is mostly the standard coordinate reader, which uses different properties depending on the browser, but instead of browser sniffing we check for object support. The clientX event attribute returns the horizontal coordinate (according to the client area) of the mouse pointer when an event was triggered. The client area is the current window. The clientY event attribute returns the vertical coordinate (according to the client area) of the mouse pointer when an event was triggered. The pageX property returns the position of the mouse pointer, relative to the left edge of the document. The pageY property sets or returns the y-coordinate of the mouse pointer relative to the top-left corner of the browser window's client area. The scrollTop property sets or retrieves the number of pixels by which the contents of an object are scrolled upward. The scrollLeft property sets or retrieves the number of pixels by which the contents of an object are scrolled to the left.

We use the getElementById() method to access the div element with the id of the div we clicked on. Then we alter the div's left and top properties to be the cursor's minus 5 pixels. This latter is because when we later drop the div, the cursor's click must be ON the div, not just off its top corner. Note that we use the window.status property to display the values of the relevant variables. But this property does not work in the default configuration of IE, Firefox, Chrome, or Safari. To allow scripts to change the text of the status, the user must set the dom.disable_window_status_change preference to false in the about:config screen. (or in Firefox: "Tools - Options - Content -Enable JavaScript / Advanced - Allow scripts to change status bar text"). One has to also set the status bar to displayed from the View menu in IE8 and others. Funny, our security settings in Internet options for "Allow status bar updating via script" are Disable, but this script still changed the status bar content in IE8. Bug? Anyway, it should be obvious that it is best to disallow such scripting because of potential exploits by nefarious ass clowns. And you may dump this part of the code if or when you use this grab and drop script. (In other words, change window.status="x="+x+" y="+y+" flag="+flag+" q="+q+" ";} to just }.)

We define a couple of divs, with the first having attributes like so: id = "a1" onclick="check('a1'). You can see that what this means is that if you click on this div, it will send its id ('a1') to the check function. The same goes for the second div, which sends an id 'a2'. Next we use the Document Object Model (DOM) in a for loop to add labels to the browser window. We could use the createElement() Method to bring a div into existence and the appendChild() Method to get it integrated into the document. But we used the innerHTML property to put the labels into the div elements and put the divs on the page instead. Admittedly, this sole use of innerHTML is crude and does not always work in all situations (nor does document.write), since the div isn't integrated into the page as well if you do not create the div elements and append them to the page as a child of the parent element. But it worked, so what's not to like?

There are three scripts that relate to the issue of grab-and-drop or drag-and-drop scripts: Grab and Drop, Not Drag and Drop, Add Ids and onClicks to Divs, and Add Ids and onClicks and Grab and Drop to Divs.

The Add Ids and onClicks to Divs script uses JavaScript to Add Ids and onClicks to Divs. The Add Ids and onClicks and Grab and Drop to Divs script does the same, but doesn't display any alerts proving that the onClicks not only work right in the main three browsers (2013 versions of IE8, Firefox, and Chrome), they can also furnish ids or other info to the user. The script below is a simple grab and drop, whereas the Add Ids and onClicks and Grab and Drop to Divs script is a cross-browser script that not only adds divs with onClick events, but also lets the user grab and move any and all divs as desired. The Grab and Drop, Not Drag and Drop script gives you a grab and drop script that you can use in your scripts. It creates divs on the fly with onClicks and ids already installed, then lets you move them around. The div creation method employs the innerHTML property. We created the divs to test with and see if you like grab and drop rather than drag and drop. The script is cross-browser and quite short and simple. If you have divs on a page that need moving which have no ids or onclick events, use our script on the page—you need not create any new divs like the script below does.

<html>
<head>
<title>mouse-div</title>
<style type="text/css">
.grab {position:absolute;font-size:15px;font-weight:bold;color:black;}
</style>
<script type="text/javascript">

var q="iii";//which one is grabbed--if none, this is "iii"
var flag=0;//if one is grabbed--if none, this is 0
var ii,x,y;
var labels = new Array('PHP','JavaScript','jQuery','C#','CSS');
var addtopage='';

function check(ii) {
if(flag==1){flag=0;q="iii";return;}
if(q=="iii"&&flag==0){flag=1;q=ii;}}

function startmouse() {document.onmousemove=getCoords;}

function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){x = e.pageX;y = e.pageY;} else if
(e.clientX){x = e.clientX + document.body.scrollLeft;y = e.clientY + document.body.scrollTop;}
if(flag==1&&q!="iii"){var myDiv=document.getElementById(q);myDiv.style.left=(x-5)+'px';myDiv.style.top=(y-5)+'px';}
window.status="x="+x+" y="+y+" flag="+flag+" q="+q+" ";}

</script>
</head>
<body onload="startmouse()">

<P><center>CLICK DIV TO GRAB DIV. MOVE DIV WITH MOUSE. CLICK TO DROP DIV. DO NOT HOLD DOWN MOUSE BUTTON WHILE MOVING!</center></P>

<div id = "a1" onclick="check('a1')" style="top:190px;left:700px;position:absolute;border:1px groove #000000;
width:50px;height:20px;background-color:#CCC0CC"></div>

<div id = "a2" onclick="check('a2')" style="top:190px;left:600px;position:absolute;border:1px groove #000000;
width:50px;height:20px;background-color:#CCCCCC"></div>

<script type="text/javascript">
for (var i = 0; i < labels.length; i++) {
var j="i"+i;var xxx=i*50;var yyy=i*50+100;
addtopage += "<div class='grab' id='"+j+"' onclick='check(\""+j+"\")' style='left:"+xxx+"px;top:"+yyy+"px;'>"+labels[i]+"</div>";}
document.body.innerHTML += addtopage;
</script>
</body>
</html>