Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menyelesaikan masalah bahawa jQuery EasyUI Dialog tidak boleh diseret ke bawah_jquery

Bagaimana untuk menyelesaikan masalah bahawa jQuery EasyUI Dialog tidak boleh diseret ke bawah_jquery

WBOY
WBOYasal
2016-05-16 15:37:411112semak imbas

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.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn