Question

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

我认为通过使用此代码可以轻松完成此操作：

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

然而它似乎不起作用。

您可以找到没有叠加图片here

的示例

以下是覆盖图像here

的示例

任何帮助都会很棒，请保持你的答案相对简单，因为我不是jQuery中的大师。

谢谢。

Answer 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');

Answer 2

请改为：收听#container上的onmousedown，onmousemove，onmouseup事件。使用jQuery绑定到事件。当onmousedown发生并且onmousemove触发时，使用e.pageX，e.pageY和$（'＃container'）。offsetLeft和$（'＃container'）。offsetTop作为位置，并设置底层图像的新位置。如果您希望用户体验能够响应（基础图像随光标移动），则移动逻辑应该在onmouse上。在onmouseup触发时停止移动底层图像。

请查看以下示例：

Jquery mousedown + mousemove

这个页面的底部有一个在容器中获取鼠标位置的例子（e.pageX，e.pageY，$（'＃container'）。offsetLeft和$（'＃container'）。offsetTop）：

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

Shahan

jQuery在另一个图像下拖动图像

2 个答案: