javascript - Jquery-ui Sortable with js list maker from array 无法正常工作
问题描述
所以我正在尝试实现一个可排序的列表。但是,该列表是使用 JavaScript 从数组中生成的。该数组来自后端 c#。
这是我的可排序 jquery -
$('.sortable-list').sortable({
connectWith: '.sortable-list',
update: function (event, ui) {
var changedList = this.id;
var order = $(this).sortable('toArray');
var positions = order.join(';');
success: writeCategories(positions);
console.log("positions written");
},
});
这是我的 JavaScript 函数,它生成一个列表......
function makecategories(array) {
// Create the list element:
var list = document.createElement('ul');
list.id = "boo";
list.className = "sortable-list ui-sortable";
for (var i = 0; i < array.length; i++) {
// Create the list item:
var item = document.createElement('li');
item.id = i + 1;
item.className = "ui-sortable-handle";
item.style = '"margin: 1px; width: 130px; padding: 2px; vertical - align: middle;"';
// Set its contents:
item.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(item);
}
// Finally, return the constructed list:
return list;
}
这是我从后端获取数组并调用我的 JS 函数的方法
var categories = <%= this.javaSerial.Serialize(this.Menus) %>;
//alert(categories[3]);
document.getElementById('categories').appendChild(makecategories(categories));
这是我的 HTML
<div id="categories">
</div>
这是我得到的结果 -
Hen
Dog
Cat
但是这个列表是不可排序的。在这里的任何帮助将不胜感激。
这是我尝试过的东西-
<div id="categories">
<ul class="sortable-list">
<li id="1"> Food </li>
<li id="2"> Drinks </li>
</ul>
<div>
这给了我一个结果-
Food
Drinks
Hen
Dog
Cat
其中,食物和饮料列表是可排序的,而母鸡猫列表是不可排序的。
请随时问我可能需要的更多信息。
解决方案
考虑下面的例子。
$(function() {
function makeSortList(arr, obj) {
if (obj == undefined) {
obj = "body";
}
obj = $(obj);
var list = $("<ul>", {
id: "boo",
class: "sortable-list"
});
$.each(arr, function(i, v) {
$("<li>", {
id: i + 1
}).html(v).css({
margin: "1px",
width: "130px",
padding: "2px",
verticalAlign: "middle"
}).appendTo(list);
});
list.appendTo(obj).sortable({
connectWith: '.sortable-list',
update: function(e, ui) {
var changedList = $(this).attr("id");
var order = $(this).sortable('toArray');
var positions = order.join(';');
//success: writeCategories(positions);
console.log("positions written", positions);
}
});
return list;
}
makeSortList(["Cat 1", "Cat 2", "Cat 3"], "#categories");
});
.sortable-list {
list-style-type: none;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="categories"></div>
您可以看到这会从 Array 项创建列表,然后在添加后初始化 Sortable。
推荐阅读
- spring - 如何将 spring 1.2.6 应用程序迁移到 Spring boot ?是否有相同的迁移工具
- html - 页脚不在整个页面的底部
- linux - 在特定时间后从脚本启动和停止脚本
- jquery - Laravel:单个数据未显示:Ajax
- plsql - 页面项目中带有问号的菱形
- python - 按关键字对 2d numpy 字符串数组进行排序
- r - 仅引用 R 中 str_extract_all 中的最后一个匹配项
- reactjs - 无法使用 amqplib 库在 ReactJs 中连接 rabbitMQ
- bash - 1>/dev/null 和 >/dev/null 和 &>/dev/null
- javascript - 某些节点具有多个父节点的垂直图