0

包含jQuery、jQuery-ui和其中一个 ui 主题（我非常喜欢lightness）

（请耐心等待，底部有一个问题，如果您愿意，可以跳到，只是想说明我是如何到达现在的位置的）

（对不起，如果我在代码中遗漏了任何错误或位，它确实有效，但为了便于阅读而将代码剪掉了）

我从jQuery-UI项目提供的标准draggable + Sortable开始：

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

然后我想好了，现在我想在 pageItem 上单击 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);
    });

所以现在它已经很实用了，我想在 pageElement 中添加一个“添加”按钮，所以我会有 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>';

再次使用来自 pageItem 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();
}

这就是我现在所处的位置，也是我目前正在解决的问题。

如果您 dblclick pageElement，则会复制该元素（如预期的那样）。

如果您单击添加按钮，该按钮也会复制一个新元素（如预期的那样）。

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

我要做的是为围绕添加按钮项的 dblclick 事件创建一个死区。

我对任何想法持开放态度。

干杯

卢克

4

2 回答 2

0

我知道它远没有帮助，但我建议不要听 dblclick - 它是 a) 在不同的客户端中的工作方式不同 - jquery 不会掩盖所有这些，b) 你不希望你的用户双击，情况很复杂。

于 2010-07-28T12:46:51.873 回答
0

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

它涉及定义一个全局变量：

var clicked = 0;

然后在 ui-add 的实时事件上将值设置为 1，然后设置超时以延迟将值重置回 0：

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

那么在我的 pageElement dblclick 函数上：

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

不理想，但它有效。

于 2010-07-28T13:31:46.990 回答