gpt4 book ai didi

javascript - jQuery UI 单击可排序

转载 作者:行者123 更新时间:2023-11-28 11:18:20 25 4
gpt4 key购买 nike

我的 jQuery UI 排序功能工作正常,但我还想添加基本的单击操作以导致可拖动项目发生变化 <ul> 。我有<div class="click_area">禁用拖动。我想要的是第一个<ul>如果单击 click_area 则可排序 <li>将移至第二个<ul>就好像我把它拖过来一样。如果在第二个中单击 click_area 则同样处理 <ul>它将移至第一个 <ul> 。我创建了一个 JS Fiddle 进行测试:http://jsfiddle.net/helpinspireme/wMnsa/

如有任何建议,我们将不胜感激。谢谢。

最佳答案

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

关于javascript - jQuery UI 单击可排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9776089/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com