jQuery EasyUI Dialog를 아래로 드래그할 수 없는 문제를 해결하는 방법_jquery

jquery easyui를 사용하면 멋진 프런트엔드 페이지를 쉽게 만들 수 있습니다. 최근 사용 중 대화상자에서 문제를 발견했습니다.

사용자가 페이지 밖으로 대화 상자를 드래그한 후에는 페이지를 다시 열지 않는 한 대화 상자를 아래로 드래그할 수 없습니다. 이 문제는 사용자 경험에 매우 중요합니다.

그래서 해당하는 함수나 이벤트가 있는지 알아보기 위해 easyu API를 연구하기 시작했는데, 이미 만들어진 것이 없다는 사실이 밝혀져 방법을 생각해내야 했습니다.

아이디어는 다음과 같습니다.

패널의 onOpen 이벤트를 사용하여 디로그의 원본 왼쪽과 상단을 가져옵니다

사용자가 대화 상자를 드래그할 때 패널의 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가 직면한 문제를 성공적으로 해결하는 데 도움이 되기를 바랍니다. 대화상자를 아래로 끌 수 없는 문제가 있습니다.