功能很簡單，卻非常的實用，程式碼更加的簡潔，這裡就不多廢話了 奉上原始碼： 複製程式碼 程式碼如下: http://www.w3.org/1999/xhtml"> <br /> *<br /> {<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> .dragBox<br /> {<br /> width: 400px;<br /> height: 200px;<br /> position: absolute;<br /> top: 40%;<br /> left: 40%;<br /> background: #e8e8e8;<br /> z-index: 8001;<br /> }<br /> .dragBox > div<br /> {<br /> height: 30px;<br /> cursor: move;<br /> background: #00ff21;<br /> position: relative;<br /> } <p>.ui-mask<br /> {<br /> width: 100%;<br /> height: 100%;<br /> background: #000;<br /> position: absolute;<br /> top: 0px;<br /> z-index: 8000;<br /> opacity: 0.4;<br /> filter: Alpha(opacity=40);<br /> }<br /> <br /> $(function () {<br /> var mouseOffx = 0;<br /> var mouseOffy = 0;<br /> var isDrag = false;<br /> $(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) {<br /> mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;<br /> mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top;<br /> isDrag = true;<br /> })<br /> $(document).unbind(".click").on("mousemove", function (ev) {<br /> var mourseX = ev.clientX, mourseY = ev.clientY;<br /> var moveX = 0, moveY = 0;<br /> if (isDrag === true) {<br /> moveX = mourseX - mouseOffx;<br /> moveY = mourseY - mouseOffy;<br /> var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false);<br /> var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false);<br /> moveX = Math.min(maxX, Math.max(0, moveX));<br /> moveY = Math.min(maxY, Math.max(0, moveY));<br /> $(".dragBox").css({ "left": moveX, "top": moveY });<br /> }<br /> });<br /> $(document).unbind(".click").on("mouseup", function () {<br /> isDrag = false;<br /> });<br /> });<br /> test
