Question

我有jQuery UI排序功能正常工作，但我还想添加一个基本点击操作，以使可拖动项目更改<ul>。我拖动<div class="click_area">禁用了。我想要的是第一个<ul>，如果点击了click_area，那么可排序的<li>会移动到第二个<ul>，就像我拖了它一样。如果在第二个<ul>中点击click_area，它将被移动到第一个<ul>。我创建了一个用于测试的JS小提琴：http://jsfiddle.net/helpinspireme/wMnsa/

任何建议都将不胜感激。感谢。

Answer 1

$("#unassigned_list, #recipients_list").sortable({
    connectWith: ".connected_sortable",
    items: "li",
    handle: ".draggable_area",
    stop: function(event, ui) {
        updateLi(ui.item);
    }
}).disableSelection().on("click", ".click_area", function() {
    // First figure out which list the clicked element is NOT in...
    var otherUL = $("#unassigned_list, #recipients_list").not($(this).closest("ul"));
    var li = $(this).closest("li");

    // Move the li to the other list. prependTo() can also be used instead of appendTo().
    li.detach().appendTo(otherUL);

    // Finally, switch the class on the li, and change the arrow's direction.
    updateLi(li);
});

function updateLi(li) {
    var clickArea = li.find(".click_area");
    if (li.closest("ul").is("#recipients_list")) {
        li.removeClass("ui-state-default").addClass("ui-state-highlight");
        clickArea.html('&#8592;');
    } else {
        li.removeClass("ui-state-highlight").addClass("ui-state-default");
        clickArea.html('&#8594;');
    }    
}

Answer 2

这是一个适合你的起点，

.on('click', '.click_area', function(){
    $(this).parent().appendTo($("#unassigned, recipients").not($(this).closest("ul")));
})

诀窍是点击处理程序位于父容器而不是单个子容器上，因此当它们被移动时，您不需要继续管理它们的处理程序。

您需要做的就是更新样式。

jsFiddle

点击时可以对jQuery UI进行排序

2 个答案: