드래그 가능한 요소가있는 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/