4、当鼠标移出对象或者鼠标弹起的时候,则认为对象处于不能移动的状态。这个在我的代码中使用一个bool类型的变量isMouseDown表示,当这个变量为true的时候,则说明对象处于可移动状态,如果为false的时候,表示对象处于不可移动状态。鼠标移出对象或者弹出的时候,就将isMouseDown置为false。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>使用鼠标拖动层代码</title> 5 <style type="text/css"> 6 #Main 7 { 8 width:400px; 9 height:400px;10 position:absolute;11 top:10px;12 left:0;13 border:1px solid #CCC;14 border-radius:5px;15 background-color:Green;16 }17 h318 {19 margin:0;20 width:400px;21 height:40px;22 background-color:Gray;23 cursor:move;24 line-height:40px;25 border-radius:5px 5px 0 0;26 }27 </style>28 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>29 <script type="text/javascript">30 //注册一个Jquery的鼠标拖动函数,参数为要拖动的对象31 $.fn.extend({ SliderObject: function (objMoved) {32 var mouseDownPosiX;33 var mouseDownPosiY;34 var InitPositionX;35 var InitPositionY;36 var obj = $(objMoved) == undefined ? $(this) : $(objMoved);37 $(this).mousedown(function (e) {38 //当鼠标按下时捕获鼠标位置以及对象的当前位置39 mouseDownPosiX = e.pageX;40 mouseDownPosiY = e.pageY;41 42 InitPositionX = obj.css("left").replace("px", "");43 InitPositionY = obj.css("top").replace("px", "");44 obj.mousemove(function (e) {//这个地方改成$(document).mousemove貌似可以避免因鼠标移动太快而失去焦点的问题45 //貌似只有IE支持这个判断,Chrome和Firefox还没想到好的办法46 //if ($(this).is(":focus")) {47 var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX);48 var tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(InitPositionY);49 obj.css("left", tempX + "px").css("top", tempY + "px");50 //};51 //当鼠标弹起或者离开元素时,将鼠标弹起置为false,不移动对象52 }).mouseup(function () {53 obj.unbind("mousemove");54 }).mouseleave(function () {55 obj.unbind("mousemove");56 });57 })58 }59 });60 $(document).ready(function () {61 $("h3").SliderObject($("#Main"));62 })63 </script>64 </head>65 <body>66 <div id="Main">67 <h3>鼠标放在这里拖动我</h3>68 <div id="Container">可以使用鼠标拖动的层</div>69 </div>70 </body>71 </html>