jsp dialog位置允许移动

在JSP中，为了实现一个可移动的对话框或者模态窗口，通常我们会结合HTML、CSS和JavaScript。以下是一个基本的例子：

1. HTML结构：

<div id="movableDialog" class="dialog ui-widget-content ui-corner-all" style="width: 300px; position: absolute;">
    <p>这是你的可移动对话框内容</p>
    <a href="#" class="close">X</a>
</div>

这里我们创建了一个绝对定位的div元素作为对话框，`ui-widget-content` 和 `ui-corner-all` 是一些UI框架（如jQuery UI）的样式类。

2. CSS定义对话框的移动属性：

.dialog {
    cursor: move; /* 允许鼠标拖拽 */
    transition: all 0.3s ease; /* 添加动画效果 */
}

3. JavaScript代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <!-- 引入jQuery UI -->

<script>
$(document).ready(function(){
    $("#movableDialog").draggable({ // 启用拖拽功能
        containment: 'parent', // 确保它只在其父元素内移动
        stop: function(event, ui) { 
            // 当拖拽停止时更新对话框的位置
            $(this).css({
                top: ui.position.top,
                left: ui.position.left
            });
        }
    });

    $(".close").click(function() { // 关闭对话框
        $("#movableDialog").fadeOut("slow");
    });
});
</script>

上述代码使用了jQuery UI的`draggable()`方法来启用对话框的拖动功能，并在拖动结束时保存新的位置。`.close`类的点击事件则会隐藏对话框。