带有可拖动元素的JQuery工具栏，后跟弹出窗口

我想开发一个奇特的功能，为我的网页添加小部件。 计划是在页面顶部添加一个带有图标的工具栏。例如，其中一个图标可以表示图形。如果工具栏中的元素可以拖放到网页上的特定位置，那就太好了。 释放鼠标按钮后，将打开一个弹出窗体，其中可以设置元素的详细信息。按finished/save后，元素应固定在释放鼠标的位置

这是我的想法，但现在现实主义开始了。。。我怎样才能做到这一点

---

提前谢谢

最简单的解决方案是使用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');
});​

$（'.move'）.draggable（）.mouseup（函数（e）{
var$t=$（本）；
var p=$（''）；
p、 addClass（'pop'）；
p、 css（'top'，e.pageY.）.css（'left'，e.pageX）；
$（'body'）。追加（p）；
$t.unbind（'mouseenter mouseleave mousedown mouseup'）；
});​

---

演示：

非常感谢！我没想到会这么简单。还有一个问题：您使用了警报，是否可以将div（或另一个html元素）添加到所选位置？当然可以。该警报只是为了“标记”你放置任何需要的功能的位置。我在回答中更新了fiddle链接，向你展示如何在触发鼠标点击后在鼠标位置创建新的div。太棒了，真的很好：）非常感谢你的帮助，这看起来是解决我问题的一个很好的方法：）