Создайте мертвую зону в кликабельной области jQuery - PullRequest
Новая
       21

Создайте мертвую зону в кликабельной области jQuery

0 голосов
/ 28 июля 2010

С jQuery , jQuery-ui и одной из тем пользовательского интерфейса (мне очень нравится легкость ) включены

(потерпите меня)внизу есть вопрос, который вы можете пропустить, если хотите, просто хотели показать, как я попал туда, где я есть)

(извините, если есть какие-либо ошибки или ошибки, которые я пропустил вкод, он работает, но сокращал код для удобства чтения)

Я начал со стандартного перетаскиваемого + сортируемого , предоставляемого jQuery-UI project: 

// HTML
<div id="leftColumn">
<ul id="pageElements">
<li class="ui-state-default ui-corner-all" id="html">Html</li>
<li class="ui-state-default ui-corner-all" id="paragraph">Paragraph</li>
<li class="ui-state-default ui-corner-all" id="image">Image</li>
<li class="ui-state-default ui-corner-all" id="faq">FAQ</li>
</ul>
</div>

<div id="rightColumn">
    <ul id="pageItems"></ul>
</div>

// JavaScript Code
$("#pageItems").sortable({
    revert: true,
    placeholder: 'ui-state-highlight',
    tolerance: 'pointer'
});
$("#pageElements li").draggable({
    connectToSortable: '#pageItems',
    helper: 'clone',
    revert: 'invalid'
 });

Тогда я начал хорошо думать, что было бы полезно добавить функцию dblclick, позволяющую перемещать элементы из одного списка в другой без необходимости перетаскивания, поэтому я добавил это: 

    $("#pageElements li").dblclick(function () {
        copythis(this);
    });

function copythis(elem) {
    var selected = $(elem).closest("li").clone();     
    $("#pageItems").append(selected).html();
}

Тогда я подумал, теперь я хочу dblclick на элементе страницы и показать диалог для редактирования

, поэтому я добавил: 

<div id="itemDialog"></div> 


$("#itemDialog").dialog({ autoOpen: false, modal:true });
$("#pageItems li").live("dblclick", function () {
    openDialog(this);
});

function openDialog(elem) {
    $("#itemDialog").dialog('open');
}

Тогда я подумал, что хочупри наведении курсора на элемент, чтобы разрешить удаление, и у меня также может бытьЕще: 

var removeButton = '<span class="buttons"><span class="ui-edit ui-state-default ui-corner-all ui-icon ui-icon-pencil" title="edit">Edit</span><span class="ui-remove ui-state-default ui-corner-all ui-icon ui-icon-closethick" title="remove">Remove</span></span>';

$("#pageItems li").live("mouseenter", function () { $(this).append(addButton); }).live("mouseleave", function () { $(this).find(".buttons").remove(); });

    $(".ui-remove").live("click", function () { $(this).closest("li").remove(); });

    $(".ui-edit").live("click", function () {
        openDialog(this);
    });

Так что теперь это было довольно функционально, я хотел добавить кнопку «добавить» к элементу страницы, чтобы у меня было 3 варианта перетаскивания, dblclick и нажатие кнопки, так чтодобавив код: 

    var addButton = '<span class="buttons"><span class="ui-add ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-e" title="Add">Add</span></span>';

использованный код со страницы. Элемент li "live hover" снова: 

$("#pageElements li").live("mouseenter", function () { $(this).append(addButton); }).live("mouseleave", function () { $(this).find(".buttons").remove(); });

$(".ui-add").live("click", function () {
    copythis(this);
});

Я изменил функцию copythis, чтобы разрешить включение кнопок: 

function copythis(elem) {
    var selected = $(elem).closest("li").clone();
    selected.find(".buttons").remove();
    $("#pageItems").append(selected).html();
}

И вот где я сейчас и проблема, над которой я сейчас работаю.

Если вы щелкнете элемент pageElement, он скопирует элемент (как и ожидалось).

Если вы нажмете кнопку добавления, которая также скопирует новый элемент (как и ожидалось).

, поскольку событие pageElement dblclick прикреплено к тегу pageElement li, а событие нажатия кнопки добавления находится на вложенном теге span, который, если я быстро нажимаю на кнопку добавления, иногда вызывает событие dblclick, так чтодобавление нескольких элементов в список pageItem.

Я хочу создать мертвую зону для события dblclick, которое окружает элемент кнопки добавления.

Я открыт для любых идей.

Ура

Люк

Ответы [ 2 ]

0 голосов
/ 28 июля 2010

ОК, поэтому я нашел ответ, вероятно, не самый лучший, но он работает.

Включает определение глобальной переменной: 

var clicked = 0;

Затем при прямом событии пользовательского интерфейса добавьте значение 1, а затем установите тайм-аут, чтобы задержать сброс значения обратно до 0: 

    $(".ui-add").live("click", function () {
        clicked = 1;
        copythis(this);
        setTimeout(function () { clicked = 0;}, 100);
    });

Итак, на моей странице элемент dblclick: 

    $("#pageElements li").dblclick(function () {
        if (clicked == 0) {
            copythis(this);
        }
    });

Не идеально, но работает.

0 голосов
/ 28 июля 2010

Я знаю, что это далеко не полезно, но я бы советовал не слушать dblclick - это а) работает по-разному на разных клиентах - и jquery не маскирует все это, б) вы не хотите, чтобы ваш пользователь двойной щелчок, это сложно.

...