Question

tl;dr JSFiddle URL: http://jsfiddle.net/66Mck/

I have a Drag UI I’m working on, and I’m having trouble with <a> tags inside the drag interface.

I want people to be able to drag anywhere inside the UI, including <a> tags because they are a big metro style tile.

The goal is, if they click on an <a> and drag less than 20 px, the link fires, otherwise the drag should just move the panel.

The entire event in question is below, but the part to focus on is:

if (Math.abs(distance - initialPosition) > 20) {
 $('a').mouseup(function (e) { e.preventDefault(); });
}

Whole event below:

$('#panorama').mousedown(function (e) {
    initialPosition = e.pageX - $('#panorama').position().left;
    previousPosition = $('#panorama').position().left;
    $(document).mousemove(function (e) {
        distance = e.pageX - initialPosition;
        $('#panorama').css({ 'left': distance });
        if (Math.abs(distance - initialPosition) > 20) {
            $('a').mouseup(function (e) { e.preventDefault(); });
        }
        return false;
    });
    $(document).one('mouseup', function () {
        $(document).unbind();
        if (snapTo) {
            metroUI.intelliIncrement();
        }
    });
    return false;
});

Currently the drag length sensor works properly, but neither .click() nor .mouseup() handle the event, because the .mousedown() portion of the .click() has already fired in the parent element $('#panorama').mousedown

Answer 1

Got it to work the way you want by (a) fixing distance calculation and (b) my negating <a> tag click event instead of mouseup.

Have updated your fiddle with both fixes.

Have put some debug code in the mouseup handler.

Updated fiddle here: http://jsfiddle.net/66Mck/29/