我使用PHP，但Jquery是我遇到的问题。长时间搜索后无法找到答案。我对Ajax，Jquery的了解有限。这只是一个测试脚本，如果它可以工作，我可以在项目中实现它。
目标：使用自动保存更改列表的顺序 - 但仍可使用自动保存进行编辑。
什么有效：更改订单（无自动保存），内联编辑适用于自动保存，但不带“可排序列表”脚本！
问题：当左键单击列表元素（li）时，它可以拖动到新位置，但内联编辑不再起作用！
问题：如何解决上述问题？ 通过$ .post链接为新订单头寸提供哪些数据？ （我需要元素ID和新订单中的ID）。两者都会通过链接提供吗？每个
可能的解决方案：创建一个句柄来拖动元素，以便列表元素的其余部分可编辑或只是更正代码。
每一个小步骤都是迈向宏大解决方案的一步。谁会帮助我？
生成的HTML
<html>
<head>
<script src="jquery-1.10.2.js"></script>
<script>
function showEdit(editableObj) {
$(editableObj).css("background","#FFF");
}
function saveToDatabase(editableObj,column,id) {
$(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
$.ajax({
url: "saveedit.php",
type: "POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
success: function(data){
$(editableObj).css("background","#FDFDFD");
}
});
}
</script>
<script type="text/javascript" src="inc_link_jquery-1.js"></script>
<script type="text/javascript" src="inc_link_jquery-ui-1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#listorder ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=orderlist';
$.post("saveedit2.php", order);
}
});
});
});
</script>
</head>
<body>
<br><br><br>
<div id="listorder">
<ul class="ui-sortable">
<li id=1><div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3<br></div></li>
<li id=2><div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1<br></div></li>
<li id=3><div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2<br></div></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：1)
问题是，您的可排序lis的ID必须以特定方式格式化，并且您需要填充已排序项的html中的值。该值必须为id属性中的。：
serialize（options）返回：String
将可排序项 ids 序列化为表单/ ajax可提交字符串。调用此方法会生成一个哈希值，该哈希值可以附加到任何URL，以便轻松地将新的项目顺序提交回服务器。
默认情况下，通过查看“setname_number”格式的每个项目的ID（“key_value”可能更适合恕我直言），它会发出像“setname”这样的哈希值[] =＆数放大器; SETNAME [] =编号”
。注意：如果serialize返回一个空字符串，请确保id属性包含下划线。它们必须采用以下形式：“set_number”
例如，id属性为“foo_1”，“foo_5”，“foo_2”的3元素列表将序列化为“foo [] = 1＆amp; foo [] = 5＆amp; foo [] = 2”。
您可以使用下划线，等号或连字符分隔集和数字。例如“foo = 1”，“foo-1”和“foo_1”都序列化为“foo [] = 1”。
尽管如此，.sortable("serialize")实际上只有在您已知数量或少量文本时才有效。
以下是sortable("serialize")的工作原理示例：
$(".sortableList").sortable({
scroll: true,
axis: "y",
containment: "parent",
handle: $("div.sortableListTitleText").add("div.handle.move"),
update: function() {
var newList = $(".sortableList").sortable("serialize", {
attribute: "itemid"
});
}
});
$("#listorder ul").sortable({
opacity: 0.6,
cursor: 'move',
update: function(event, ui) {
var incorrect = $(this).sortable("serialize");
var correct = $(this).sortable("serialize",{attribute: "innerHTML"});
console.log(incorrect);
console.log(correct);
}
});
function showEdit(editableObj) {
//....
}
function saveToDatabase(editableObj, column, id) {
//....
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="listorder">
<ul class="ui-sortable">
<li id="foo_1">
<div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3
<br>
</div>
</li>
<li id="foo_d">
<div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1
<br>
</div>
</li>
<li id="foo_5">
<div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2
<br>
</div>
</li>
</ul>
</div>
由于您使用的是动态且可能包含任何字符（例如= - _和html）的contenteditable div，我建议您根本不使用.sortable("serialize")并在可排序列表中对元素进行循环并为每个元素手动设置一个键和值对，然后在你的ajax中发送该字符串。
$("#listorder ul").sortable({
opacity: 0.6,
cursor: 'move',
update: function(event, ui) {
var params=['action=orderlist'];
$(this).find(".ui-sortable-handle").each(function () {
var $this=$(this);
var key=$this.attr('id');
var value=encodeURIComponent($this.html()); // you MUST encode this val since it may have chars thatll muck up the string
var param = key+'='+value;
params.push(param);
});
var paramsString=params.join('')
console.log(paramsString);
$.ajax({
type: "POST",
url: "page.php",
data: paramsString,
success: function(response) {
},
error: function(xhr, status, error) {
}
});
}
});
function showEdit(editableObj) {
//....
}
function saveToDatabase(editableObj, column, id) {
//....
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="listorder">
<ul class="ui-sortable">
<li id="foo_1">
<div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3
<br>
</div>
</li>
<li id="foo_2">
<div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1
<br>
</div>
</li>
<li id="foo_3">
<div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2
<br>
</div>
</li>
</ul>
</div>