代码之家 › 专栏 › 技术社区 › Luke Duddridge

在jQuery可单击区域中创建死区

double-click click jquery-ui jquery

Luke Duddridge · 技术社区 · 16 年前

(很抱歉,如果代码中有任何错误或我遗漏的位,它确实可以工作,但为了便于阅读,它正在剪切代码)

我从标准开始 draggable + Sortable 由承包商提供 jQuery-UI 项目:

// 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'
 });

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

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

然后我想好了,现在我想点击pageItem并显示一个对话框进行编辑

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

所以现在它非常实用,我想在pageElement中添加一个“add”按钮,这样我就有了3个选项:drag、dblclick和button click,添加代码:

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

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

如果dblclick pageElement,将复制元素(如预期的那样)。

因为pageElement dblclick事件附加到pageElement li标记,而add button click事件位于嵌套在其中的span标记上,所以如果我快速单击add按钮,有时会触发dblclick事件,因此会向pageItem列表添加多个元素。

我要做的是为围绕addbutton项的dblclick事件创建一个死区。

干杯

卢克

2 回复 | 直到 16 年前

tjp 16 年前

我知道这一点都没有帮助,但我建议不要听dblclick—它是a)在不同的客户机中工作方式不同—jquery并没有屏蔽所有内容,b)您不希望用户双击,这很复杂。

Luke Duddridge 16 年前

好吧,我找到了一个答案,可能不是最好的,但它是有效的。

var clicked = 0;

然后在ui add的live事件中,将值设置为1,然后设置超时以将值的重置延迟回0:

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

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

不太理想,但很管用。