jQuery EasyUI Dialog拖不下來如何解決
使用jquery easyui可以很容易的創(chuàng)建很炫的前臺(tái)頁面,最近在使用過程中發(fā)現(xiàn)dialog存在一個(gè)問題:
用戶將dialog拖出頁面后,dialog就不能拖下來了,除非要重新打開頁面,這個(gè)問題對(duì)于用戶體驗(yàn)來說是非常重要的,
所以就開始研究easyu API看看有沒有相應(yīng)的函數(shù)或者事件去處理,結(jié)果發(fā)現(xiàn)沒有現(xiàn)成,只好自己想了個(gè)辦法:
思路如下:
使用panel的onOpen事件,取得diglog的原始left和top
當(dāng)用戶在拖動(dòng)dialog過程中,使用panel的onMove事件取得dialog所在父頁面body的width和height,
通過計(jì)算,當(dāng)用戶將diglog拖動(dòng)出body時(shí),使用panel的move函數(shù)將dialog移動(dòng)到初始的位置。
經(jīng)過測(cè)試次方法可行,代碼如下所示:
var default_left; var default_top; $('#details_dd').dialog({ title:'詳細(xì)信息', modal: true, onOpen:function(){ //dialog原始left default_left=$('#details_dd').panel('options').left; //dialog原始top default_top=$('#details_dd').panel('options').top; }, onMove:function(left,top){ //鼠標(biāo)拖動(dòng)時(shí)事件 var body_width=document.body.offsetWidth;//body的寬度 var body_height=document.body.offsetHeight;//body的高度 var dd_width= $('#details_dd').panel('options').width;//dialog的寬度 var dd_height= $('#details_dd').panel('options').height;//dialog的高度 if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){ $('#details_dd').dialog('move',{ left:default_left, top:default_top }); } } });
有些問題就需要大家一起討論研究才會(huì)有所收獲,本文分享的jQuery EasyUI Dialog拖不下來的解決辦法,希望可以對(duì)大家的學(xué)習(xí)有所幫助,幫助大家順利解決jQuery EasyUI Dialog拖不下來的問題。
相關(guān)文章
jQuery圓形統(tǒng)計(jì)圖開發(fā)實(shí)例
這篇文章主要介紹了jQuery圓形統(tǒng)計(jì)圖開發(fā)的方法,實(shí)例分析了circliful插件的用法與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04jQuery創(chuàng)建平滑的頁面滾動(dòng)(頂部或底部)
如何創(chuàng)建一個(gè)平滑的滾動(dòng)效果是本文的目的使用jQuery讓您可以滾動(dòng)到你的網(wǎng)頁的頂部或底部,相當(dāng)不錯(cuò)的一個(gè)效果,感興趣的你可不要錯(cuò)過了哈2013-02-02jquery實(shí)現(xiàn)列表上下移動(dòng)功能
這篇文章主要為大家詳細(xì)介紹了jquery 實(shí)現(xiàn)列表上移、下移功能的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-02-02快速移動(dòng)鼠標(biāo)觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleav
這篇文章主要介紹了快速移動(dòng)鼠標(biāo)所觸發(fā)的問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery 擴(kuò)展對(duì)input的一些操作方法
擴(kuò)展對(duì)input的一些方法(練習(xí)jQuery插件)2009-10-10jQuery完成表單驗(yàn)證的實(shí)例代碼(純代碼)
這篇文章主要介紹了jquery完成表單驗(yàn)證的實(shí)例代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2017-09-09