jQuery實現div隨意拖動的執行個體代碼(通用代碼)，jquerydiv

jQuery實現div隨意拖動的執行個體代碼(通用代碼)，jquerydiv

注意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> 

您可能感興趣的文章:

• jQuery 可以拖動的div實現代碼 幫客之家修正版
• 利用JQuery+EasyDrag 實現彈出可拖動的Div，同時向Div傳值，然後返回Div選中的值
• jquery實現可拖動DIV自訂儲存到資料的執行個體
• jquery div拖動效果範例程式碼
• jQuery拖動div、移動div、彈出層實現原理及樣本
• jQuery實現DIV層淡入淡出拖動特效的方法
• jQuery實現Div拖動+鍵盤控制綜合效果的方法
• jquery實現仿JqueryUi可拖動的DIV執行個體
• jQuery實現單擊彈出Div層視窗效果(可關閉可拖動)