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

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

时间: 2024-09-11 09:18:10 浏览: 70

jQuery实现HTML5 Dialog元素的鼠标拖动功能，通常需要利用`draggable`插件。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Draggable Dialog</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script> </head> <body> <div id="dialog" title="Dialog Title" class="ui-widget ui-widget-content ui-corner-all"> Content to be draggable... </div> <script> $(function() { // Select the dialog element var dialog = $("#dialog"); // Enable dragging using jQuery UI's draggable functionality dialog.draggable({ containment: 'parent', helper: 'ui-state-highlight', // Add a highlight effect for the drag handle start: function(event, ui) { // Do something on start of dragging, like change cursor style ui.helper.css('cursor', 'move'); }, stop: function(event, ui) { // Do something on stop of dragging, e.g., update position or save it somewhere console.log("Dialog stopped at", ui.position); } }); }); </script> </body> </html> ``` 在这个例子中，我们首先引入了jQuery和jQuery UI库，然后选中dialog元素，并使用`.draggable()`方法使其可拖动。`containment: 'parent'`限制了拖动范围在dialog容器内。`helper: 'ui-state-highlight'`设置了一个高亮效果作为拖动标记。

阅读全文