Question

我想首先说我是整个编程场景的新手。这是我在学校的第一个信息通信技术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'
            });

BUT：
如果我使用另一台具有其他分辨率的显示器或将浏览器保留在我的屏幕的一半上，则坐标会发生变化，并且代码会正常工作，因为偏移会发生变化。
我的问题：
无论浏览器的分辨率或窗口是什么，我怎么能做到这一点，坐标是一样的。也许用百分比或检查对象是否在背景图像的css边界内？

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

Answer 1

为什么要对坐标进行硬编码？只需在背景图像上调用“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 */;

检查对象是否在css border / css包装器中

1 个答案: