点击按钮后出现悬浮div，并且可以挪动其位置

点击按钮后出现悬浮div，并且可以挪动其位置，是通过HTML、CSS和JavaScript来实现的一个常见交互功能。具体步骤如下：

1. HTML：首先需要在HTML文档中定义一个按钮元素和一个div元素。这个div元素默认是隐藏的，可以通过设置其CSS属性`display`为`none`来实现。

<button id="myButton">显示悬浮div</button>
<div id="myDiv" style="display: none;">这是一个可以挪动的悬浮div</div>

2. CSS：需要定义div的基本样式，包括其在页面上的初始位置、大小、背景颜色等。同时，还需要定义一些CSS样式来控制div的悬浮效果，比如`position: absolute;`可以使得div脱离文档流并相对于最近的已定位的祖先元素（如果没有，则相对于初始包含块）进行定位。

#myDiv {
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: lightgray;
    top: 50px;
    left: 50px;
}

3. JavaScript：通过JavaScript来监听按钮的点击事件，并在事件触发时改变div的`display`属性为`block`或其他值，使其显示出来。同时，可以通过监听鼠标事件来实现div的拖拽功能，例如`mousedown`、`mousemove`和`mouseup`。

document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('myDiv').style.display = 'block';
});

var offset = { top: 0, left: 0 };
var isDragging = false;

document.getElementById('myDiv').addEventListener('mousedown', function(e) {
    isDragging = true;
    offset.top = e.offsetTop - e.clientY;
    offset.left = e.offsetLeft - e.clientX;
});

document.addEventListener('mousemove', function(e) {
    if (isDragging) {
        var x = e.clientX + offset.left;
        var y = e.clientY + offset.top;
        document.getElementById('myDiv').style.left = x + 'px';
        document.getElementById('myDiv').style.top = y + 'px';
    }
});

document.addEventListener('mouseup', function(e) {
    if (isDragging) {
        isDragging = false;
    }
});