<script type="text/javascript"> //注册一个Jquery的鼠标拖动函数,参数为要拖动的对象 $.fn.extend({ SliderObject: function (objMoved) { var isMouseDown = false; //鼠标是否按下 var mouseDownPosiX; var mouseDownPosiY; var InitPositionX; var InitPositionY; var obj = $(objMoved) == undefined ? $(this) : $(objMoved); obj.mousedown(function (e) { //当鼠标按下时捕获鼠标位置以及对象的当前位置 mouseDownPosiX = e.pageX; mouseDownPosiY = e.pageY; isMouseDown = true; InitPositionX = obj.css("left").replace("px", ""); InitPositionY = obj.css("top").replace("px", ""); }).mousemove(function (e) { //当鼠标按下并且移动时,首先判断鼠标是否在当前焦点,以及鼠标是否已经弹起, if ($(this).is(":focus") && isMouseDown) { var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX); var tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(InitPositionY); obj.css("left", tempX + "px").css("top", tempY + "px"); } //当鼠标弹起或者离开元素时,将鼠标弹起置为false,不移动对象 }).mouseup(function () { isMouseDown = false; }).mouseleave(function () { isMouseDown = false; }); } }); $(document).ready(function () { $("#Slider").SliderObject($("#zb")); }) </script>