How to move div with the mouse using jquery ?

Question

I need to be able to move a div with my mouse and store the new pos of the div in database to remember the display. How can I do it?

Answer 1

I would highly recommend you look into jQuery UI and the draggable interaction. Basically, you'll want to add the code to your draggable div (assuming it has id="draggable"):

$("#draggable").draggable();

And, then put your necessary behavior in the stop event. More specifically, you'd do this:

$('#draggable').draggable({
    stop: function(event, ui) { ... }
});

As for the database storing, you could use an AJAX call in the above function, or you could store it in-page, such that some form-send or other action results in the positional information being passed to the server and stored inline with other data. I'd be careful with an AJAX call, since you may bomb your db with position data with every dragging on every browser. Depends on your app...