Question

我正在建立这个网站，我被要求让摄影师的图像随机大小，有序和定位，并具有点击和拖动它们的能力。除了这个主要问题外，所有这一切都非常顺利。

尽管在Firefox中一切都运行良好，但在Chrome或Safari（可能是其他浏览器）中打开时，任何在即时加载时窗口中不可见的图像在您尝试拖动时似乎都会消失。如果您在“消失”后向上滚动，您会发现图像实际上是在发送到页面顶部的同时仍然跟随您的点击和拖动动作。

之前我遇到过这个错误，我相信通过删除一些不再需要的javascript来修复它。但这次我似乎尝试了删除某些JS或链接到jQuery库的所有组合，但仍无法找到解决办法。

任何人都知道如何解决这个问题？

您可以在此处查看问题和我的代码：http://www.coreytegeler.com/jb/oddfuture/

编辑似乎完全依赖于Draggable功能。我删除了除下面以外的所有JavaScript代码，问题仍然存在

$(function() {
$( ".vert" ).draggable();
$( ".horiz" ).draggable();
});

编辑这看起来似乎必须与问题有关

    var imgInit_x, imgInit_y, mouseInit_x, mouseInit_y, elem;
document.addEventListener('mousedown', startDrag, false);
document.addEventListener('mousedown', drag, false);
document.addEventListener('mousedown', endDrag, false);

function startDrag(e)
{
    if (e.target.tagName.toUpperCase == "IMG")
    {
        elem = e.target;
        imgInit_x = elem.style.left;
        imgInit_y = elem.style.top;
        mouseInit_x = e.layerX || e.offsetX;
        mouseInit_y = e.layerX || e.offsetX;
    }
}

function drag(e)
{
    try
    {
        currMouse_x = e.layerX || e.offsetX;
        currMouse_y = e.layerY || e.offsetY;
        elem.style.left = imgInit_x + currMouse_x - mouseInit_x;
        elem.style.top = imgInit_y + currMouse_y - mouseInit_y;
    }
    catch (err){}
}

function endDrag(e)
{
    elem = null;
}

Answer 1

当我试图破解你的代码时，我得到了：

Uncaught ReferenceError: detector is not defined

问题发生时似乎没有初始化detector变量。你能说出它的用法吗？我还浏览了你最后的Javascript脚本，无法找到任何目的吗？尝试删除Javascript，它可能会解决您的问题。

可移动无法在Chrome / Safari中使用

1 个答案: