jquery ui中div拖動出現輔助線方便對齊

先上效果：

**說明：

html部分：

第乙個11111111111111div

第二個22div

第三個333333div

第四個ggdgdgdiv

第五個div

第六個div

body

.draggable

.guide

#guide-h

#guide-v

/**

* 指標拖動輔助標線

* @author sdj

*/var min_distance = 8; //捕獲的最小距離

var guides = ; // 沒有可用的引導 

var inneroffsetx, inneroffsety;  

$(".draggable").draggable(, 

/*** 引數說明

* @param event

* @param ui

* *  event事件的 

* offsetx：

* outerwidth： 屬性是乙個唯讀的整數，宣告了整個視窗的寬度。

*  outerheight： 屬性是乙個唯讀的整數，宣告了整個視窗的高度。

*/drag: function( event, ui ), left: }; 

var $t = $(this); 

//pagex、pagey：文件座標x、y ;

var pos = ; 

//outerheight、outerwidth：整個瀏覽器的高度、寬度

var w = $t.outerwidth() - 1; 

var h = $t.outerheight() - 1; 

var elemguides = computeguidesforelement( null, pos, w, h ); 

$.each( guides, function( i, guide ) }

}); 

});if( chosenguides.top.dist <= min_distance )

else

if( chosenguides.left.dist <= min_distance )

else

}, stop: function( event, ui )

});

function computeguidesforelement( elem, pos, w, h )

return [

, //垂直方向左下對齊線

, ,  ,

//您可以新增_any_其他指南在這裡就好了（如指南10畫素單元的左） ,

];  }

jquery ui中div拖動出現輔助線方便對齊

先上效果 說明 html部分 第乙個11111111111111div 第二個22div 第三個333333div 第四個ggdgdgdiv 第五個div 第六個div css部分 body draggable guide guide h guide v js拖動部分 指標拖動輔助標線 author...

JS實現DIV拖動

可移動可調整大小 預設居中開啟 保留位置上開啟 開啟div 操作說明 選中核取方塊 可移動 可調整大小 後，開啟的div具有移動 調整大小的功能 此時移動 調整大小快捷鍵可使用 反之，不可移動 調整大小 此時移動 調整大小快捷鍵無效 單選框預設居中開啟選中，無論有無儲存div位置和大小均以預設位置及...

可拖動DIV層

定義好div後，只要把div的id傳進去就能實現拖動效果 var obox document.getelementbyid divid 拖動層 var disx disy 0 var bdrag false 啟用拖動 obox.onmousedown function event 拖動開始 docu...