JavaScript配合CSS在网页上实现一个可用鼠标拖放的模块，并且在这个模块中还有一个图片链接哦，总体来说这是一个简单的例子，还不能直接运用到网页当中，高手就不要看了，初学者可以练一下手，参考一下。 示例： <html><br /> <head><br /> <title>JavaScript拖拽</title><br /> <script type="text/javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script><br /> <script type="text/javascript"><br /> $(document).ready(function () {<br /> var fx;<br /> var fy;<br /> var flag = false;<br /> var title = $("#m_div_title");<br /> var m_div = $("#m_div");<br /> m_div.mousemove(function (event) {<br /> if (flag) {<br /> var myEvent = event || window.event;<br /> changeXY(m_div, myEvent);<br /> }<br /> });<br /> m_div.mouseup(function () {<br /> title.unbind("mousemove");<br /> flag = false;<br /> });<br /> title.mousedown(function (event) {<br /> var t = $(this);<br /> var myEvent = event || window.event;<br /> fx = myEvent.clientX;<br /> fy = myEvent.clientY;<br /> t.mousemove(function (event) {<br /> var myEvent = event || window.event;<br /> changeXY(m_div, myEvent);<br /> flag = true;<br /> });<br /> return false;<br /> });<br /> title.mousemove(function (event) {<br /> var myEvent = event || window.event;<br /> changeXY(m_div, myEvent);<br /> flag = true;<br /> })<br /> function changeXY(m_div, myEvent) {<br /> if (fx > myEvent.clientX) {<br /> var change_top_x = parseInt(m_div.css("left")) - (fx - myEvent.clientX);<br /> //测试是否超出左边窗口<br /> if (change_top_x < 5) {<br /> change_top_x = 5;<br /> //flag = false;<br /> //title.unbind("mousemove");<br /> }<br /> m_div.css("left", change_top_x + "px");<br /> fx = myEvent.clientX;<br /> }<br /> if (fx < myEvent.clientX) {<br /> var change_top_x = parseInt(m_div.css("left")) + (myEvent.clientX - fx);<br /> //测试是否超出窗口右边<br /> if (change_top_x > ($(window).width() - parseInt(m_div.css("width")) - 5)) {<br /> change_top_x = ($(window).width() - parseInt(m_div.css("width")) - 5);<br /> //flag = false;<br /> //title.unbind("mousemove");<br /> }<br /> m_div.css("left", change_top_x + "px");<br /> fx = myEvent.clientX;<br /> }<br /> if (fy > myEvent.clientY) {<br /> var change_top_y = parseInt(m_div.css("top")) - (fy - myEvent.clientY);<br /> //测试是否超出窗口顶部<br /> if (change_top_y < 5) {<br /> change_top_y = 5;<br /> // flag = false;<br /> // title.unbind("mousemove");<br /> }<br /> m_div.css("top", change_top_y + "px");<br /> fy = myEvent.clientY;<br /> }<br /> if (fy < myEvent.clientY) {<br /> var change_top_y = parseInt(m_div.css("top")) + (myEvent.clientY - fy);<br /> //测试是否超出窗口底部<br /> if (change_top_y > ($(window).height() - parseInt(m_div.css("height")) - 5)) {<br /> change_top_y = ($(window).height() - parseInt(m_div.css("height")) - 5);<br /> //flag = false;<br /> //title.unbind("mousemove");<br /> }<br /> m_div.css("top", change_top_y + "px");<br /> fy = myEvent.clientY;<br /> }<br /> }<br /> // ＶｅｒｙＨｕｏ．ＣＯＭ<br /> title.mouseup(function () {<br /> title.unbind("mousemove");<br /> flag = false;<br /> });<br /> title.mouseout(function () {<br /> title.unbind("mousemove");<br /> document.onmousemove = document.onmouseup = null;<br /> });<br /> });<br /> </script><br /> <style><br /> #m_div {<br /> border: 1px solid #000000;<br /> width: 400px;<br /> height: 250px;<br /> position: absolute;<br /> top: 300px;<br /> left: 400px;<br /> background-color: #FFFFFF;<br /> }<br /> #m_div_title {<br /> background: #ffffff;<br /> height: 250px;<br /> color: #FFFFFF;<br /> cursor: crosshair<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="m_div"><br /> <div id="m_div_title"><br /> <span style="margin-right: 280px"></span><br /> <img id="img" src="/images/logo.gif"><br /> </div><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 关于 js 优化的一些经验网页拖动模块，Js层拖拽，加减号收缩和展开
