http://storehouse.sakura.ne.jp/drag.html
こんな感じで。
<html> <head> <script type="text/javascript"> function add_event(element, type, handler, flag) { function handler_wrapper(e) { e = e || event; return handler(e); } if (element.addEventListener) { element.addEventListener(type, handler_wrapper, flag); } else if (element.attachEvent) { element.attachEvent("on" + type, handler_wrapper); } } var enable_drag = (function() { var z_index = 0; return function(id, top, left) { var element = document.getElementById(id); var dragger = null; element.style.position = 'absolute'; element.style.top = top + 'px'; element.style.left = left + 'px'; element.style.zIndex = z_index++; add_event(element, 'mousedown', function(e) { var start_x = e.clientX; var start_y = e.clientY; element.style.zIndex = z_index++; dragger = function(mousemove) { var offset_x = mousemove.clientX - start_x; var offset_y = mousemove.clientY - start_y; element.style.top = (top + offset_y) + 'px'; element.style.left = (left + offset_x) + 'px'; }; }); add_event(element, 'mousemove', function(e) { if (dragger) { dragger(e); } }); add_event(element, 'mouseup', function(e) { if (dragger) { top = parseInt(element.style.top); left = parseInt(element.style.left); dragger = null; } }); } })(); </script> </head> <body> <!-- foo --> <div id="foo" style="width:100px; height:100px; background-color:red;"> foo </div> <script type="text/javascript"> enable_drag('foo', 100, 100); </script> <!-- bar --> <div id="bar" style="width:100px; height:100px; background-color:blue;"> bar </div> <script type="text/javascript"> enable_drag('bar', 200, 200); </script> <!-- zoo --> <div id="zoo" style="width:100px; height:100px; background-color:yellow;"> zoo </div> <script type="text/javascript"> enable_drag('zoo', 300, 300); </script> </body> </html>
いまいち動きがぎこちない…