http://www.cnblogs.com/ljchow/archive/2010/04/27/1721695.html 拖拽
拖拽简单例子
<style type="text/css"> #div1 {width:300px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="http://static.cnblogs.com/images/adminlogo.gif" draggable="true" ondragstart="drag(event)" />
另一个例子：2015-6-12
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style type="text/css"> .drag{position:fixed;width:400px;height:300px;top:100px;left:100px;padding:0;background:#f90;border: 1px solid #c3c3c3;box-shadow: 1px 1px 10px #FCECEC;cursor:move;} </style> <script type="text/javascript"> $(function(){ //初始化 $(".drag").attr("data-move",0);//移动标记 $(".drag").attr("data-x",0);//鼠标离控件左上角的相对位置 $(".drag").attr("data-y",0);//鼠标离控件左上角的相对位置 $(".drag").mousedown(function(e){ _x=e.pageX-parseInt($(this).css("left")); _y=e.pageY-parseInt($(this).css("top")); $(this).attr("data-move",1); $(this).attr("data-x",_x); $(this).attr("data-y",_y); }); $(document).mousemove(function(e){ _div = $(".drag"); if( _div.attr("data-move")==1 ){ var x=e.pageX - _div.attr("data-x");//移动时根据鼠标位置计算控件左上角的绝对位置 var y=e.pageY - _div.attr("data-y"); $(".drag").css({top:y,left:x});//控件新位置 } }).mouseup(function(){ $(".drag").attr("data-move",0); }); }); </script> </head> <body> <div class="drag">DIV可以拖动</div> </body> </html>