오브젝트를 드래그&드랍할 수 있도록 하는 javascript(jQuery) 코드입니다.
여기에 쿠키나 로컬 스토리지등을 활용해서 widget 형태로 꾸밀 수 있을 것 같습니다.
우선은 간단하게 구현했습니다.
javascript (needs jQuery)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$.fn.draggable = function() { return $.each(this, function() { var $el = $(this); var move = function(e) { if(!$el.data("_isMove")) return; var pos = $el.data("pos"), pos = { x: parseInt($el.css("left")) + (e.clientX - pos.x), y: parseInt($el.css("top")) + (e.clientY - pos.y) }; $el.css({ top: pos.y, left: pos.x }); $el.data("pos", { x: e.clientX, y: e.clientY }); }; $el.on("mousedown", function(e) { var $this = $(this); $el.data("_isMove", true); $el.data("pos", { x: e.clientX, y: e.clientY }); }); $el.on("mouseup mouseout", function(e) { $el.data("_isMove", false); }); $el.mousemove(move); }); }; $("#object1, #object2, #object3").draggable(); |
Here is test code that editable & testable.
http://jsfiddle.net/rootbox/DwYLW/
이세상의 모든 언어들중에 최후에 남는건 javascript 일거라고 (약간 농담섞인) 한 말이 있는데
정말 js는 멋진(?) 언어인듯하네요 ㅋㅋㅋ
ps. 그나저나 왠지 이전과 블로그가 달라보이는건 저의 착각이겠죠?
훔쳐보는 기분이 들어,
발자국 남기고 갑니다.
건강하세요~