Question

在那里，我正在寻找帮助来制作包含内容的darg＆amp; drop地图。我已经使用了draggable-UI，但我不能做我想要的风格。我已经做了一个测试。但内容没有固定在背景上（div在append（）中调用）。我会链接到像grepolis draggable background这样的东西。这是我已经完成的事情：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test de Map</title>
    <style>
        .globalMap {width:500px;height:400px;margin:50px auto; border:#291f12 2px solid;overflow:hidden;position:relative}
        .map {width:2048px; height:1440px; position:absolute;top:0; left:0}
        .overlay {background:url(https://terre-noire.fr/static/img/carte3.jpg) no-repeat top left;width:2048px; height:1440px; position:absolute;top:0;left:0;}
        .overlay p {position:absolute;top:0;left:0;}
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script async>
        jQuery(function($){
            $('.map').append('<div class="overlay"><p>test de drag</p></div>');
        });

        var imageOffset = {
            top:0,
            left:0,
        };

        $(function() {
            $(".overlay").draggable({
                drag: function(event, ui) {
                    $(".overlay").css('background-position', (ui.position.left + imageOffset.left) + 'px ' + (ui.position.top + imageOffset.top) + 'px');
                }
            });
        });
    </script>
</head>
</body>
    <div class="globalMap">
        <div class="map"></div>
    </div>
</body>
</html>

非常感谢您的帮助。我已经在这里找到了很多答案，我相信你会对我有所帮助:)。

Answer 1

您需要将Jquery可拖动UI脚本引用到您的代码中。

希望这会有所帮助:)

delete

背景拖放与移动内容

1 个答案: