今天在做一個(gè)功能的時(shí)候使用到了Jquery UI中的dialog組件，因?yàn)槭且粋€(gè)很簡(jiǎn)單的組件，有很多功能都沒(méi)有提供，比如說(shuō)直接獲取到dialog的位置，直接修改dialog的位置都是不行的，并且但可拖動(dòng)的位置看不見(jiàn)的時(shí)候，這個(gè)時(shí)候就是坑了，關(guān)閉不了，也拖動(dòng)不了，這個(gè)時(shí)候只能刷新頁(yè)面來(lái)重新初始化界面了。

我今天解決的就是這個(gè)問(wèn)題：解決這種問(wèn)題有兩種方式(個(gè)人認(rèn)為)

1、修改屬性讓可拖動(dòng)局域可見(jiàn)，進(jìn)行拖動(dòng)

2、不讓出現(xiàn)可拖動(dòng)區(qū)域不可見(jiàn)的情況。

針對(duì)第一種情況，我沒(méi)有想到合適的辦法。下面給出第二種情況的解決辦法，原理就是判斷當(dāng)前dialog的位置，如果拖動(dòng)位置的可能出現(xiàn)不可見(jiàn)的情況，這個(gè)時(shí)候修改dialog的位置，dialog有個(gè)方法是監(jiān)聽(tīng)dialog拖動(dòng)的，我的實(shí)現(xiàn)方式就是放在這個(gè)方法內(nèi)的，

代碼如下：

/**
* 添加拖拽監(jiān)聽(tīng) 當(dāng)UI的位置跑出屏幕外的時(shí)候 進(jìn)行更新
* @param {Object} event
* @param {Object} ui
*/
drag : function(event,ui)
{
	var posX = ui.position.left;
	var posY = ui.position.top;
	if (posX < 5)
	{
		posX = 5;
	}
	if (posY < 5)
	{
		posY = 5;
	}
	ui.position.left = posX;
	ui.position.top = posY;
}

這是一段很簡(jiǎn)單的代碼，沒(méi)有什么可以說(shuō)的地方，主要是使用ui的一些屬性。

以上這篇修改Jquery Dialog 位置的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論