如何解决在两个列表之间拖放列表2仅具有排序
我正在努力从当前代码中获得所需的功能。
- 两个列表(网格样式)列表1-列表2
- 列表1的项目可拖到列表2,不可排序,无法克隆(但由于只能添加一次而被禁用)
- 列表2可放置的,可排序的整个项目html复制自列表1。
$(function () {
$('.box').draggable({
appendTo: "body",helper: "clone"
});
$("#sortable2").droppable({
activeClass: "ui-state-default",hoverClass: "ui-state-hover",accept: ":not(.ui-sortable-helper)",drop: function (event,ui) {
//add first element when cart is empty
if ($(this).find('.placeholder').length > 0) {
$(this).find('.placeholder').remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
} else {
//used as flag to find out if element added or not
var i = 0;
$(this).children("li").each(function () {
if ($(this).offset().top >= ui.offset.top) {
//compare
$("<li class='box'></li>").text(ui.draggable.text()).insertBefore($(this));
i = 1;
return false; //break loop
}
});
if (i !== 1) {
//if element dropped at the end of cart
$("<li class='box'></li>").text(ui.draggable.text()).appendTo(this);
}
}
}
})
$(function() {
$( "#sortable2" ).sortable({
placeholder: "highlight",items: "li:not(#sortable1)",sort: function () {
$(this).removeClass("ui-state-default");
}
});
});
});
//Display action in text
$(function DisplayWhatDropped() {
var area = "Area Dropped";
var item = "fId of the item";
$(".result").html(
"[Action] <b>" + item + "</b>" + " dropped on " + "<b>" + area + "</b>"
);
});
任何帮助将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。