การบันทึกและรีเซ็ตลำดับใน sortablejs
Aug 25 2020
ฉันใช้ sortablejs เพื่อสร้างรายการลาก + วาง ฉันต้องการสองปุ่มหนึ่งที่ออกผลลัพธ์เป็นคำสั่งซื้อปัจจุบันขององค์ประกอบของรายการและอื่น ๆ ที่เพิ่งจะรีเซ็ตกลับคำสั่งซื้อปัจจุบันสู่สภาพเดิม
ฉันพบแหล่งข้อมูลสองสามอย่างเกี่ยวกับวิธีการพิมพ์คำสั่งซื้อปัจจุบันและวิธีการรีเซ็ตแต่เนื่องจากฉันยังค่อนข้างใหม่กับจาวาสคริปต์ฉันจึงประสบปัญหาในการใช้งาน
ขณะนี้การแจ้งเตือนของฉันเพิ่งแสดงผล[object HTMLUListElement]และฉันไม่สามารถค้นหาการรีเซ็ตได้
รหัสด้านล่าง ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม!
//Initiate sortable list
Sortable.create(simpleList, {
animation: 150});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!-- Simple List -->
<ul id="simpleList" class="list-group">
<li data-id="i1" class="col-1">#1</li>
<li data-id="i2" class="col-2">#2</li>
<li data-id="i3" class="col-3">#3</li>
<li data-id="i4" class="col-4">#4</li>
</ul>
<button type="button" onclick="alert($('#simpleList').toArray())">Current order!</button>
<button type="button" onclick="">Reset!</button>
</html>คำตอบ
2 gaetanoM Aug 25 2020 at 05:29
ปัญหาของคุณอยู่ในบรรทัดนี้:
$('#simpleList').toArray()
ต้องใช้ method .toArray ()กับอินสแตนซ์ที่เรียงลำดับได้
var simpleList = document.getElementById('simpleList');
// create sortable and save instance
var sortable = Sortable.create(simpleList, {animation: 150});
// save initial order
var initialOrder = sortable.toArray();
document.getElementById('saveCurrOrder').addEventListener('click', function(e) {
// print current order
var order = sortable.toArray();
console.log(order);
});
document.getElementById('resetOrder').addEventListener('click', function(e) {
// reset to initial order
sortable.sort(initialOrder);
})<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<ul id="simpleList" class="list-group">
<li data-id="i1" class="col-1">#1</li>
<li data-id="i2" class="col-2">#2</li>
<li data-id="i3" class="col-3">#3</li>
<li data-id="i4" class="col-4">#4</li>
</ul>
<button type="button" id="saveCurrOrder">Current order!</button>
<button type="button" id="resetOrder">Reset!</button>