Javascript: dragging divs

Question

Does anybody know how dragging objects (divs) around on the screen by mouse-click-and-hold implemented using pure JS? I am interested in the native JS functions and the technique which may be used.

Further, how can we do this using jquery?

Answer 1

You can read Generic Drag article. It works with "pure" JavaScript.

However, I still recommend jQuery UI because it's more feature-rich and probably cross-browser.

In jQuery UI this is easily done using $('#divId').draggable();

Answer 2

i will recommend using jquery ui-draggable for this:

<div id="draggableDiv">
content here
</div>

javascript

$(document).ready(function(){
    $("#draggableDiv").draggable();
  });

Don't forget to include

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;

See the working example here >> http://jsbin.com/ocugo

And for pure javascipt solution [ w/o any framework ], here is a nice tut : http://blogs.sun.com/ahot/entry/javascript_how_to_make_draggable