StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODraggable Not Working in Chrome/Safari
text
Body
copied!<p>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.</p> <p>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.</p> <p>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.</p> <p>Anyone know how this problem can be resolved?</p> <p>You can view the issue and the code I have in place here: <a href="http://www.coreytegeler.com/jb/oddfuture/" rel="nofollow">http://www.coreytegeler.com/jb/oddfuture/</a></p> <p><strong>EDIT</strong> Seems to be solely reliant on the Draggable function. I removed all of the JavaScript codes other than the below and issue still occurs</p> <pre><code>$(function() { $( ".vert" ).draggable(); $( ".horiz" ).draggable(); }); </code></pre> <p><strong>EDIT</strong> This just looks like it has to have something to do with the issue</p> <pre><code> 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; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload