首页jquery实现 H5 <dialog>元素的鼠标拖动案例

jquery实现 H5 <dialog>元素的鼠标拖动案例

时间: 2024-09-11 08:18:28 浏览: 122

jQuery可以轻松地实现HTML5 `<dialog>` 元素的鼠标拖动功能。首先，你需要确保页面上已经包含了jQuery库。然后，你可以创建一个`<dialog>`元素，并添加一些必要的CSS样式使其可拖动。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> dialog { display: none; position: absolute; width: 400px; height: 200px; background-color: #f1f1f1; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } dialog.draggable { cursor: move; -webkit-user-select: none; /* 阻止文本选择 */ user-select: none; } </style> </head> <body> <div id="dialog" class="draggable"> <h2>Drag me!</h2> <p>This is a draggable dialog.</p> <button onclick="closeDialog()">Close</button> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 初始化可拖动 $('#dialog').draggable({ stop: function(event, ui) { console.log('Dialog stopped at:', ui.position); } }); // 关闭对话框函数 function closeDialog() { $(this).dialog("close"); } // 显示对话框 $("#dialog").dialog({modal: true, open: function() { $(this).addClass('active'); }}); }); </script> </body> </html> ``` 在这个例子中，我们首先给`<dialog>`元素添加了`.draggable`类并绑定了`draggable`事件。当用户开始拖动对话框时，会触发`stop`事件并记录停止的位置。`closeDialog`函数用于关闭对话框。

阅读全文