0

首先我想说我是整个编程领域的新手。这是我在学校的第一个 ICT jQuery 项目。
项目：
我有多个可拖动对象（图像）。它们在#wrapper 中，包装器在我的 style.css 中
现在我想做它，以便当图像被拖动到​​位于包装器下方的背景图像（居中）上时，它们将从图像中改变。我通过获取每个对象的位置成功地做到了这一点：

     drag: function(){
        var who = $("#draggable1");
        var offset1 = who.offset();
        var xPos1 = offset1.left;
        var yPos1 = offset1.top;
        $('#posX').text('x: ' + xPos1);
        $('#posY').text('y: ' + yPos1);

然后检查对象在哪里，如果它在我的背景图片的 X 和 Y 内，它们会改变：

    if(yPos1 > '115' && yPos1 < '578')
            {
            this.src = 'pinkward5.png'
            }

如果对象被丢弃在背景图像之外，还要编写代码，这将使它回到原来的位置：

    if(xPos1 < '717' || xPos1 > '1202')
            {
            who.animate({ 'top': offset1.top == '0', 'left': offset1.left == '0'}, 200, function(){
            who.stop( true,true );
            who.mouseup();
            this.src = 'visionward.png'
            });

但是：
如果我使用另一个分辨率的显示器或将浏览器留在屏幕的一半，坐标会改变，并且代码不会正常工作，因为偏移量会改变。
我的问题：
无论浏览器的分辨率或窗口如何，我怎样才能做到这一点，坐标是相同的。也许用百分比或检查对象是否在背景图像的 css 边界内？


谢谢！我希望我没有违反 stackoverflow 规则。

4

1 回答 1

0

为什么要硬编码坐标？只需在背景图像上调用“offset()”即可获取坐标，就像您在可拖动元素上所做的一样，并计算其宽度和高度的边界。

var bkgd = $('.whatever-you-name-the-background-image-class');
var bkgd_offset = bkgd.offset();
if(xPos1 >= bkgd_offset.left && xPos1 + who.width() <= bkgd_offset.left + bkgd.width() && 
   yPos1 >= bkgd_offset.top && yPos1 + who.height() <= bkgd_offset.top + bkgd.height())
    /* draggable inside background */;
else
    /* not inside background */;
于 2013-10-10T08:35:19.380 回答