这段代码工作得很好,但我想在cookie中存储排序表行,以便下次用户加载页面时,这些值将从cookie中检索,表将按此排序。怎么做呢?请帮助…
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fix Drag Tablet</title>
<link rel="stylesheet" href="style/style.css">
<!-- Javascript: tdBS -->
<script src="javascript/lib/jquery.js"></script>
<script src="javascript/lib/jquery-ui-1.10.4.custom.min.js"></script>
<script src="javascript/lib/jquery.ui.touch.punch.js"></script>
<script src="javascript/lib/taphold.js"></script>
</head>
<body>
<table>
<tbody class="sortable">
<tr><td class="sort-card">1</td></tr>
<tr><td class="sort-card">2</td></tr>
<tr><td class="sort-card">3</td></tr>
<tr><td class="sort-card">4</td></tr>
<tr><td class="sort-card">5</td></tr>
<tr><td class="sort-card">6</td></tr>
<tr><td class="sort-card">7</td></tr>
<tr><td class="sort-card">1</td></tr>
<tr><td class="sort-card">2</td></tr>
<tr><td class="sort-card">3</td></tr>
<tr><td class="sort-card">4</td></tr>
<tr><td class="sort-card">5</td></tr>
<tr><td class="sort-card">6</td></tr>
<tr><td class="sort-card">7</td></tr>
<tr><td class="sort-card">1</td></tr>
<tr><td class="sort-card">2</td></tr>
<tr><td class="sort-card">3</td></tr>
<tr><td class="sort-card">4</td></tr>
<tr><td class="sort-card">5</td></tr>
<tr><td class="sort-card">6</td></tr>
<tr><td class="sort-card">7</td></tr>
<tr><td class="sort-card">1</td></tr>
<tr><td class="sort-card">2</td></tr>
<tr><td class="sort-card">3</td></tr>
<tr><td class="sort-card">4</td></tr>
<tr><td class="sort-card">5</td></tr>
<tr><td class="sort-card">6</td></tr>
<tr><td class="sort-card">7</td></tr>
</tbody>
</table>
<script>
//This varible will help us when the jquery.ui.touch.punch.js start its magic
var dragFlag = false;
//starting the sortable ui jquery, no secrets.
$(".sortable").sortable({
// this delay will help not letting the cards make a move when the user is scroltdng the page.
delay: 350,
//some basics sets
scroll: true,
containment: "document",
//onces you drop your element we have to set the dragFlag varible to false
stop: function (event, ui) {
dragFlag = false;
// Here we return the card to the original scale
$(".sortable td").css({ 'transition': 'all 0s', 'transform': 'scale(1)' });
},
//here is just to make sure that when you drop a card, it will return to the original scale and setting the dragFlag to false
update: function (event, ui) {
dragFlag = false;
$(".sortable td").css({ 'transition': 'all 0s', 'transform': 'scale(1)' });
}
});
// Here I'm using a good jquery plugin called taphold that fires a function after you hold a finger over the element for x mileseconds
// to enable the drag and drop the user must hold the card over 2 mileseconds, the card will be bigger and the user will be able to drag the card around
$(".sortable td").on("taphold", { duration: 200 }, function () {
//setting the dragFlag to true
dragFlag = true;
//making the card bigger
$(this).css({
'transform': 'scale(1.1)'
});
});
</script>
</body>
</html>
要获得行顺序,请在行中添加id,
<tr id="1"><td class="sort-card">1</td></tr>
<tr id="2"><td class="sort-card">2</td></tr>
<tr id="3"><td class="sort-card">3</td></tr>
<tr id="4"><td class="sort-card">4</td></tr>
<tr id="5"><td class="sort-card">5</td></tr>
现在您可以使用这段代码来获取行顺序然后将其保存到cookie
document.cookie="orderList=" + $('.sortable').sortable('toArray').toString();
代码$('.sortable').sortable('toArray'). tostring()将返回一个以逗号分隔的id列表。
现在,在下一个页面加载时,您可以从cookie中获取这些逗号分隔的id,然后可以重新排序表行。