Обработка событий тегов привязки внутри Drag UI - PullRequest
Новая
       14

Обработка событий тегов привязки внутри Drag UI

1 голос
/ 12 октября 2011

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

У меня есть пользовательский интерфейс Drag, над которым я работаю, и у меня возникают проблемы с тегами <a> внутри интерфейса перетаскивания.

Я хочу, чтобы люди могли перетаскивать их в любое место внутри пользовательского интерфейса, включая теги <a>, поскольку они представляют собой большую плитку в стиле метро.

Цель состоит в том, чтобы, если они щелкают по <a> и перетаскивают менее 20 пикселей, ссылка срабатывает, в противном случае при перетаскивании следует просто переместить панель.

Все рассматриваемое событие находится ниже, но часть, на которой нужно сосредоточиться, это: 

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

Всего событий ниже: 

$('#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;
});

В настоящее время датчик длины перетаскивания работает правильно, но ни .click(), ни .mouseup() не обрабатывают событие, поскольку часть .mousedown() в .click() уже сработала в родительском элементе $('#panorama').mousedown

1 Ответ

1 голос
/ 16 декабря 2011

Получилось так, как вы хотите, (а) исправив вычисление расстояния и (б) мое отрицательное событие <a> tag click вместо mouseup.

Обновили вашу скрипку обоими исправлениями.

В обработчик mouseup добавлен код отладки.

Обновленная скрипка здесь: http://jsfiddle.net/66Mck/29/

...