使用jquery 定义一个动态的div 并追加到dom上 鼠标拖动此div 可随意改位置并记录到缓存中 刷新页面后 这个 div还在上次的位置

你可以使用以下代码来实现：

<!DOCTYPE html>
<html>
<head>
    <title>Draggable Div</title>
    <style>
        .draggable {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="draggableDiv" class="draggable"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 创建可拖动的div
            var draggableDiv = $('<div id="draggableDiv" class="draggable"></div>').appendTo('body');

            // 设置初始位置
            var position = localStorage.getItem('divPosition');
            if (position) {
                var pos = position.split(',');
                draggableDiv.css({
                    left: pos[0] + 'px',
                    top: pos[1] + 'px'
                });
            }

            // 设置拖动功能
            draggableDiv.on('mousedown', function(e) {
                var startX = e.pageX - draggableDiv.offset().left;
                var startY = e.pageY - draggableDiv.offset().top;
                $(document).on('mousemove', function(e) {
                    var newX = e.pageX - startX;
                    var newY = e.pageY - startY;
                    draggableDiv.css({
                        left: newX + 'px',
                        top: newY + 'px'
                    });
                });
                e.preventDefault();
            });

            $(document).on('mouseup', function() {
                $(document).off('mousemove');
                // 将位置保存到缓存中
                localStorage.setItem('divPosition', draggableDiv.css(['left', 'top']).join(','));
            });
        });
    </script>
</body>
</html>

这段代码首先创建了一个具有draggable class的div，并将其追加到body中。然后，它使用localStorage来检查缓存中是否存在上次保存的位置，并将div放置在该位置。接下来，它为div添加了拖动功能，当鼠标按下时，它记录鼠标和div的初始位置，并在鼠标移动时更新div的位置。最后，在鼠标抬起时，它将div的位置保存到缓存中，以便在刷新页面后可以将其放置在正确的位置

使用jquery 定义一个动态的div 并追加到dom上鼠标拖动此div 可随意改位置并记录到缓存中刷新页面后这个 div还在上次的位置

使用jquery 定义一个动态的div 并追加到dom上 鼠标拖动此div 可随意改位置并记录到缓存中 刷新页面后 这个 div还在上次的位置

使用jquery 定义一个动态的div 并追加到dom上鼠标拖动此div 可随意改位置并记录到缓存中刷新页面后这个 div还在上次的位置