0

我正在建立这个网站，我被要求让摄影师的图像随机调整大小、排序和定位，并能够单击并拖动它们。除了这个主要问题之外，所有这一切都进行得很顺利。

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

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

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

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

EDIT似乎完全依赖于 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;
}
4

1 回答 1

0

当我尝试修改您的代码时，我得到：

Uncaught ReferenceError: detector is not defined

问题发生时，该detector变量似乎尚未初始化。你能具体说明它的用途吗？另外，我浏览了您的最后一个 Javascript 脚本，但找不到任何用途？尝试删除 Javascript，它可能会解决您的问题。

于 2013-02-28T15:37:01.197 回答