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

Question

我想开发一个花哨的功能来向我的网页添加小部件。计划是在页面顶部添加一个带有图标的工具栏。例如，这些图标之一可以代表一个图表。如果工具栏中的元素可以拖放到网页上的特定位置，那就太好了。释放鼠标按钮后，应该会打开一个弹出表单，可以在其中设置元素的详细信息。按下完成/保存后，元素应固定在释放鼠标的位置。

那是我的想法，但现在现实主义开始了……我怎样才能实现这样的目标？

提前致谢！

Answer 1

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

演示：http: //jsfiddle.net/DVHuY/1/