Fungsi ini sangat mudah, tetapi sangat praktikal, dan kodnya lebih ringkas, jadi tidak akan ada banyak perkara karut di sini Sediakan kod sumber: Salin kod Kod adalah seperti berikut: http://www.w3.org/1999/xhtml"> <br> *<br> {<br> jidar: 0px;<br> pelapik: 0px;<br> }<br> .dragBox<br> {<br> lebar: 400px;<br> ketinggian: 200px;<br> jawatan: mutlak;<br> atas: 40%;<br> kiri: 40%;<br> latar belakang: #e8e8e8;<br> indeks-z: 8001;<br> }<br> .dragBox > div<br> {<br> ketinggian: 30px;<br> kursor: gerakkan;<br> latar belakang: #00ff21;<br> jawatan: relatif;<br> } <p>.ui-topeng<br> {<br> lebar: 100%;<br> ketinggian: 100%;<br> latar belakang: #000;<br> jawatan: mutlak;<br> atas: 0px;<br> indeks-z: 8000;<br> kelegapan: 0.4;<br> penapis: Alpha(opacity=40);<br> }<br> <br> $(fungsi () {<br> var mouseOffx = 0;<br> var mouseOffy = 0;<br> var isDrag = false;<br> $(".dragBox div:eq(0)").unbind(".klik").on("mousedown", fungsi (ev) {<br> mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;<br> mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().atas;<br> isDrag = benar;<br> })<br> $(document).unbind(".klik").on("mousemove", fungsi (ev) {<br> var mourseX = ev.clientX, mourseY = ev.clientY;<br> var moveX = 0, moveY = 0;<br> jika (isDrag === benar) {<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({ "kiri": moveX, "atas": moveY });<br> }<br> });<br> $(document).unbind(".click").on("mouseup", function () {<br> isDrag = palsu;<br> });<br> });<br> </skrip><br> </head><br> <badan><br> ujian <br> <div class="ui-mask" id="mask" onselectstart="return false"></div><br> <div class="dragBox"><br> <div><br> </div><br> </div><br> </body><br> </html><br> </p> </div>
