jQuery EasyUIダイアログが下にドラッグできない問題の解決方法_jquery

jquery easyui を使用すると、簡単にクールなフロントエンド ページを作成できます。最近、使用中にダイアログに問題があることがわかりました。

ユーザーがダイアログをページの外にドラッグした後は、ページを再度開かない限り、ダイアログを下にドラッグすることはできません。この問題はユーザー エクスペリエンスにとって非常に重要です。

そこで、対応する関数やイベントを処理できるかどうかを確認するために easyu API を調べ始めました。既製のものがないことが判明したため、方法を考える必要がありました。

アイデアは次のとおりです:

パネルの onOpen イベントを使用して、diglog の元の左と上を取得します

ユーザーがダイアログをドラッグしているときに、パネルの onMove イベントを使用して、ダイアログが配置されている親ページの本文の幅と高さを取得します。

計算により、ユーザーがディグログを本体からドラッグすると、パネルの移動機能を使用してダイアログが初期位置に移動します。

テスト後、このメソッドは次のように動作します。

var default_left;
var default_top;
$('#details_dd').dialog({
  title:'详细信息',
  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){ //鼠标拖动时事件
   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  
   }); 
    }
}
});

問題によっては、何かを得るために全員で話し合い、調査する必要があります。この記事では、ドラッグ ダウンできない jQuery EasyUI ダイアログの解決策を共有し、皆さんの学習に役立ち、jQuery EasyUI の問題をうまく解決できることを願っています。ダイアログを下にドラッグできない問題。