[英]jQuery UI Sortable on Click
我的jQuery UI排序功能运行良好,但是我还想添加一个基本的单击动作,以使可拖动项更改<ul>
。 我禁用了<div class="click_area">
拖动。 我想在第一个<ul>
中单击click_area,然后将可排序的<li>
移至第二个<ul>
就像我将其拖动一样。 如果在第二个<ul>
单击click_area,则将进行同样的处理,它将被移动到第一个<ul>
。 我创建了一个JS小提琴进行测试: 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('←');
} else {
li.removeClass("ui-state-highlight").addClass("ui-state-default");
clickArea.html('→');
}
}
这是您的起点
.on('click', '.click_area', function(){
$(this).parent().appendTo($("#unassigned, recipients").not($(this).closest("ul")));
})
诀窍是单击处理程序位于父容器而不是单个子容器上,因此,在移动它们时,您无需继续管理其处理程序。
您需要做的就是更新样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.