简体   繁体   中英

Draggable Not Working in Chrome/Safari

I'm building this site in which I was asked to have the photographers images randomly sized, ordered and positioned with the capability to click and drag them around. All of this is going pretty smooth except for this one major issue.

Although everything works great in Firefox, when opened in Chrome or Safari (possibly other browsers) any image that isn't visible int the window on immediate load seems to disappear when you attempt to drag it. If you scroll back up after it "vanishes" you'll notice the image is actually being sent to the top of the page while still following your click and drag movements.

I had this error once before and I believe it was fixed by removing some javascript that was no longer necessary. But this time I seemed to have tried every combination of removing certain JS or links to jQuery libraries and still can't find a cure.

Anyone know how this problem can be resolved?

You can view the issue and the code I have in place here: http://www.coreytegeler.com/jb/oddfuture/

EDIT Seems to be solely reliant on the Draggable function. I removed all of the JavaScript codes other than the below and issue still occurs

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

EDIT This just looks like it has to have something to do with the issue

    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;
}

When I try to bug your code I get:

Uncaught ReferenceError: detector is not defined 

The detector variable does not seems to have been initialized when the issue happens. Could you specify its usage? Also I skimmed through your last Javascript script and couldnt find any purpose to it? Try removing the Javascript, it might resolve your issue.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM