0

我需要拖动当前位于另一个 png 图像下的图像。

我以为我可以通过使用以下代码轻松做到这一点：

$(document).ready(function() {
    $(".imageOverlay").mousedown(function(eventObject){
    $('#draggable').drag();
    return false;
    });
});

但是，它似乎不起作用。

您可以在此处找到没有叠加图像的示例

这是带有叠加图像的示例

任何帮助都会很棒，请保持您的答案相对简单，因为我不是 jQuery 的专家。

谢谢你。

4

2 回答 2

1

我设法通过获取可拖动对象的宽度、高度和位置并为底层图像提供相同的 css 定位、宽度和高度来完成这项工作。

这是代码：

    var imgdrag = $(#draggable); //This is the box you drag
    var imgselector = $(.imageUnderlay); //This is the image underneath

    //Get the height, width and position of the draggable box
    var height = imgdrag.height();
    var width = imgdrag.width();
    var top = imgdrag.css("top");
    var left = imgdrag.css("left");

    //Add the css style to the image underlay
    imgselector.css('top', top);
    imgselector.css('left', left); 
    imgselector.css('height', height + 'px'); 
    imgselector.css('width', width + 'px');
于 2012-10-22T17:55:42.700 回答
0

改为这样做：监听 #container 上的 onmousedown、onmousemove、onmouseup 事件。使用 jQuery 绑定到事件。当 onmousedown 发生并且 onmousemove 触发时，使用 e.pageX、e.pageY 和 $('#container').offsetLeft 和 $('#container').offsetTop 作为位置，并为底层图像设置新位置. 如果您希望用户体验具有响应性（底层图像随光标移动），则移动逻辑应在 onmousemove 上。当 onmouseup 触发时停止移动底层图像。

查看以下示例：

jQuery mousedown + mousemove

本页底部有一个获取容器内鼠标位置的示例（e.pageX、e.pageY、$('#container').offsetLeft 和 $('#container').offsetTop）：

http://docs.jquery.com/Tutorials:Mouse_Position

沙汉

于 2012-08-21T07:22:27.160 回答