Menggunakan jquery easyui, anda boleh membuat halaman muka hadapan yang menarik Baru-baru ini, saya menemui masalah dengan dialog semasa penggunaan:
Selepas pengguna menyeret dialog keluar dari halaman, dialog tidak boleh diseret ke bawah melainkan halaman dibuka semula Isu ini sangat penting untuk pengalaman pengguna,
Jadi saya mula mengkaji API easyu untuk melihat sama ada terdapat fungsi atau acara yang sepadan untuk dikendalikan Ternyata tiada yang siap, jadi saya terpaksa memikirkan cara:
Ideanya adalah seperti berikut:
Gunakan acara onOpen panel untuk mendapatkan bahagian kiri dan atas diglog asal
Apabila pengguna menyeret dialog, gunakan acara onMove pada panel untuk mendapatkan lebar dan tinggi badan halaman induk di mana dialog terletak,
Melalui pengiraan, apabila pengguna menyeret diglog keluar dari badan, fungsi pergerakan panel digunakan untuk mengalihkan dialog ke kedudukan awal.
Selepas ujian, kaedah ini berfungsi. Kod adalah seperti berikut:
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 }); } } });
Sesetengah masalah memerlukan semua orang berbincang dan menyelidik bersama untuk mendapatkan sesuatu Artikel ini berkongsi penyelesaian kepada jQuery EasyUI Dialog yang tidak boleh diseret ke bawah. Saya harap ia dapat membantu kajian semua orang dan membantu semua orang berjaya menyelesaikan masalah yang jQuery EasyUI Dialog tidak boleh diseret ke bawah.