Mit jquery easyui können Sie ganz einfach eine coole Frontend-Seite erstellen. Kürzlich habe ich ein Problem mit dem Dialog während der Verwendung festgestellt:
Nachdem der Benutzer den Dialog aus der Seite gezogen hat, kann er nicht nach unten gezogen werden, es sei denn, die Seite wird erneut geöffnet. Dieses Problem ist für die Benutzererfahrung sehr wichtig,
Also begann ich, die easyu-API zu studieren, um zu sehen, ob es entsprechende Funktionen oder Ereignisse zur Handhabung gab. Es stellte sich heraus, dass es keine vorgefertigte gab, also musste ich mir einen Weg überlegen:
Die Idee ist wie folgt:
Verwenden Sie das onOpen-Ereignis des Panels, um die ursprüngliche linke und obere Seite des Diglogs zu erhalten
Wenn der Benutzer den Dialog zieht, verwenden Sie das onMove-Ereignis des Panels, um die Breite und Höhe des Hauptteils der übergeordneten Seite zu ermitteln, auf der sich der Dialog befindet,
Wenn der Benutzer das Diglog aus dem Körper zieht, wird durch Berechnung die Verschiebefunktion des Panels verwendet, um den Dialog an die Ausgangsposition zu verschieben.
Nach dem Testen funktioniert diese Methode. Der Code lautet wie folgt:
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
});
}
}
});
Bei einigen Problemen müssen alle gemeinsam diskutieren und recherchieren, um etwas zu erreichen. In diesem Artikel wird die Lösung für jQuery EasyUI Dialog vorgestellt, die nicht heruntergezogen werden kann Der Dialog lässt sich nicht nach unten ziehen.
