CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropwidgettoolbar
John Hendrik
John Hendrik

Reputation: 661

JQuery toolbar with draggable elements, followed by popup

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!

Upvotes: 0

Views: 1161

Answers (1)

roacher
roacher

Reputation: 666

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/

Upvotes: 2

Related Questions