Comment résoudre le problème selon lequel la boîte de dialogue jQuery EasyUI ne peut pas être déplacée vers le bas_jquery

En utilisant jquery easyui, vous pouvez facilement créer une page frontale sympa. Récemment, j'ai trouvé un problème avec la boîte de dialogue lors de l'utilisation :

Une fois que l'utilisateur a fait glisser la boîte de dialogue hors de la page, la boîte de dialogue ne peut pas être déplacée vers le bas à moins que la page ne soit rouverte. Ce problème est très important pour l'expérience utilisateur,

.

J'ai donc commencé à étudier l'API easyu pour voir s'il y avait des fonctions ou des événements correspondants à gérer. Il s'est avéré qu'il n'y en avait pas de toutes faites, j'ai donc dû réfléchir à un moyen :

.

L'idée est la suivante :

Utilisez l'événement onOpen du panneau pour obtenir la gauche et le haut d'origine du diglog

Lorsque l'utilisateur fait glisser la boîte de dialogue, utilisez l'événement onMove du panneau pour obtenir la largeur et la hauteur du corps de la page parent où se trouve la boîte de dialogue,

Grâce au calcul, lorsque l'utilisateur fait glisser le journal de fouille hors du corps, la fonction de déplacement du panneau est utilisée pour déplacer la boîte de dialogue vers la position initiale.

Après test, cette méthode fonctionne. Le code est le suivant :

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  
   }); 
    }
}
});

Certains problèmes nécessitent que tout le monde discute et recherche ensemble pour obtenir quelque chose. Cet article partage la solution à la boîte de dialogue jQuery EasyUI qui ne peut pas être traînée vers le bas. J'espère qu'elle pourra être utile à l'étude de chacun et aider tout le monde à résoudre avec succès le problème que jQuery EasyUI. La boîte de dialogue ne peut pas être déplacée vers le bas.