Question

I would like to develop a fancy function for adding widgets to my webpage.
The plan is to add a toolbar with icons to the top of the page. For example, one of these icons could represent a graph. It would be nice if the elements in the toolbar can be dragged and dropped on a specific position on the web page.
After releasing the mouse button a popup form should open, where the details of the element can be set. After pressing finished/save, the element should be pinned on the position where the mouse was released.

That was my mind speaking, but now realism kicks in… How can I achieve something like this?

Thanks in advance!

Answer 1

Easiest solution for this would be to use jquery + jquery-ui.

$('.move').draggable().mouseup(function(e) { 
var $t = $(this);        
var p = $('<div></div>');
p.addClass('pop');
p.css('top', e.pageY).css('left',e.pageX);
$('body').append(p);
$t.unbind('mouseenter mouseleave mousedown mouseup');
});​

Demo: http://jsfiddle.net/DVHuY/1/