是否可以通过拖动来更改背景位置

Is it possible to change background position by dragging?

本文关键字：背景 位置 可以通过 拖动 是否      更新时间：2023-09-26

我有一个使用世界地图图像作为背景的html地图。

我可以制作一个 js 函数来更改div 的背景位置，但我喜欢在用户单击地图然后像谷歌地图一样拖动时更改背景位置。

所以我这里有一个示例页面：http://lab.qacode.com/map 使用它 http://lab.qacode.com/map/map.jpg

我将不胜感激任何建议或提示。

完成这项工作的一个简单方法是使用 jQuery UI 的可拖动

.HTML 

<div id="map">
    <div class="map-canvas"></div>    
</div>

JavaScript

// Pre-select elements
var map = $("#map"),
    canvas = map.find(".map-canvas");
// Calculate canvas constraints
var maxLeft = map.width()-canvas.width(),
    maxTop = map.height()-canvas.height();
// Make canvas draggable
canvas.draggable({
    drag: function(e, ui) {
        // Check if canvas is within constraints
        if (ui.position.left > 0) {
            ui.position.left = 0;
        } else if (ui.position.left < maxLeft) {
            ui.position.left = maxLeft;
        }
        if (ui.position.top > 0) {
            ui.position.top = 0;
        } else if (ui.position.top < maxTop) {
            ui.position.top = maxTop;
        }
    }
});

放置标记

可以在地图上放置标记（或其他标记）。这非常简单，坐标基于画布中的像素。对于测试用例中的标记，它距离画布的左侧和顶部为 150px。

// Create simple dot marker
$("<div></div>")
    .addClass("map-marker")
    .appendTo(canvas)
    .offset(function(){
        return { left: 150, top: 150 };
    })
    // Append a label
    .append("<span><- Dot</span>");

现在到更高级的东西，即（在）著名的谷歌地图别针。

// Create draggable Google Maps pin marker
var pin =
$("<div></div>")
    .addClass("google-pin")
    .appendTo(canvas)
    .offset(function(){
        return { left: 50, top: 50 };
    })
    // Bind mouseup/down for visual confirmation of grab
    .bind({
        mousedown: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top-3 };
            });
        },
        mouseup: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top+3 };
            });
        }
    })
    // Make it draggable
    .draggable({
        start: function(e,ui){
            ui.helper.offset(function(){
                return { top: ui.offset.top-2 };
            });
        },
        container: canvas
    });

查看 jsFiddle 上的测试用例

相关文章：