ウェブページにウィジェットを追加するための凝った機能を開発したいと思います。計画は、ページの上部にアイコン付きのツールバーを追加することです。たとえば、これらのアイコンの1つはグラフを表すことができます。ツールバーの要素をWebページの特定の位置にドラッグアンドドロップできると便利です。マウスボタンを離すと、要素の詳細を設定できるポップアップフォームが開きます。終了/保存を押した後、要素はマウスを離した位置に固定する必要があります。
それが私の頭の話でしたが、今ではリアリズムが始まります...どうすればこのようなことを達成できますか？
前もって感謝します！
これに対する最も簡単な解決策は、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/