我正在寻求帮助来制作包含内容的 darg&drop map 。我已经在使用 draggable-UI，但我不能做我想做的风格。我已经做了测试。但内容并未固定在背景上(在 append() 中调用的 div)。我会链接做类似 grepolis 可拖动背景的事情。这是我已经完成的:
<!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>
已经感谢您的帮助。我已经在这里找到了很多答案，我相信你会很好地帮助我:)
最佳答案
您需要将 Jquery 可拖动 UI 脚本引用到您的代码中。
希望这有帮助:)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test de Map</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</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>
<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 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>关于javascript - 带有移动内容的背景拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46638946/