📌 相关文章

📜 jQuery UI 对话框拖动事件

📅 最后修改于: 2022-05-13 01:55:55.188000 🧑 作者: Mango

jQuery UI 对话框拖动事件

拖动对话框时会触发 jQuery UI Drag 事件。

在此处了解有关 jQuery 选择器和事件的更多信息。

句法：

$(".selector").dialog (
   drag: function( event, ui ) {
       console.log('dragged')
   },

方法：

首先，添加项目所需的 jQuery Mobile 脚本。

“打开对话框”按钮将触发单击函数(#gfg)，该功能将在对话框 (#gfg2) 中进一步打开。</li><li style="text-align:justify"> drag( event, ui ) : 当鼠标移动时触发。此拖动附加了一个回调函数，只要鼠标移动，就会触发该回调函数。<ul><li style="text-align:justify">事件：类型 -> 事件</li><li style="text-align:justify">ui : 类型 -> 对象</li><li style="text-align:justify">回调函数：函数（事件，用户界面）{console.log（'拖动'）}</li></ul></li></ul><p style="text-align:justify"><strong>示例 1：</strong></p><div><h5 class="code">HTML</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> <script type = "text/javascript"> $(function() { $( "#gfg2" ).dialog({ autoOpen: false, drag: function( event, ui ) { console.log('dragged') }, }); $( "#gfg" ).click(function() { $( "#gfg2" ).dialog( "open" ); }); }); </script> </head> <body> <div id = "gfg2" title="GeeksforGeeks"> <textarea>jQuery UI | drag(event, ui) Event

输出：