注意js放的位置,要放的靠近,若被其他覆蓋,則無法移動。
比如:
<div id="move">可移動的DIV</div>
引入jquery.js, jquery-ui.js,
<script scr="http://code.jquery.com/jquery-1.10.2.js"></script><script scr="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
一句:
$("#move").draggable();如希望,點住時鼠標變手形:
$("#move").mousedown(function(){$(this).css("cursor","pointer");}).mouseup(function(){$(this).css("cursor","default");});下面給大家分享一段通用代碼jquery實現拖動div的通用方法
<script type="text/javascript"><!-- $(document).ready(function() { $(".show").mousedown(function(e)//e鼠標事件 { $(this).css("cursor","move");//改變鼠標指針的形狀 var offset = $(this).offset();//DIV在頁面的位置 var x = e.pageX - offset.left;//獲得鼠標指針離DIV元素左邊界的距離 var y = e.pageY - offset.top;//獲得鼠標指針離DIV元素上邊界的距離 $(document).bind("mousemove",function(ev)//綁定鼠標的移動事件,因為光標在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 { $(".show").stop();//加上這個之后 var _x = ev.pageX - x;//獲得X軸方向移動的值 var _y = ev.pageY - y;//獲得Y軸方向移動的值 $(".show").animate({left:_x+"px",top:_y+"px"},10); }); }); $(document).mouseup(function() { $(".show").css("cursor","default"); $(this).unbind("mousemove"); }) }) // --></script> 新聞熱點
疑難解答