Javascript 使用jquery拖放时，如何在Cookie中存储已排序的表行？
这段代码工作正常，但我想在cookie中存储排序的表行，以便下次用户加载页面时，将从cookie中检索这些值，并根据这些值对表进行排序。怎么做？请帮忙Javascript 使用jquery拖放时，如何在Cookie中存储已排序的表行？,javascript,jquery,asp.net,cookies,Javascript,Jquery,Asp.net,Cookies,这段代码工作正常，但我想在cookie中存储排序的表行，以便下次用户加载页面时，将从cookie中检索这些值，并根据这些值对表进行排序。怎么做？请帮忙 <html lang="en"> <head> <meta charset="UTF-8"> <title>Fix Drag Tablet</title> <link rel="stylesheet" href="style/style.css">
<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>
固定拖动平板电脑
1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
//当jquery.ui.touch.punch.js开始它的魔力时，这个变量将帮助我们
var dragFlag=假；
//启动可排序的ui jquery，没有秘密。
$（“.sortable”）.sortable({
//此延迟将有助于在用户浏览页面时不让卡移动。
延误：350，
//一些基本设置
卷轴：没错，
遏制：“文件”，
//一旦删除元素，我们必须将dragFlag Variable设置为false
停止：功能（事件、用户界面）{
dragFlag=false；
//在这里，我们将卡片恢复到原始比例
$（“.sortable td”）.css（{'transition'：'all 0s'，'transform'：'scale（1）}）；
},
//这里只是为了确保当你放下一张牌时，它会回到原来的刻度，并将dragFlag设置为false
更新：功能（事件、用户界面）{
dragFlag=false；
$（“.sortable td”）.css（{'transition'：'all 0s'，'transform'：'scale（1）}）；
}
});
//在这里，我使用了一个名为taphold的好jquery插件，它在您将手指放在元素上x毫秒后启动一个函数
//要启用拖放功能，用户必须将卡保持在2毫秒以上，卡将更大，用户将能够拖动卡
$（“.sortable td”）.on（“taphold”{duration:200}，函数（）{
//将dragFlag设置为true
dragFlag=true；
//使卡片更大
$（this.css）({
“转换”：“比例（1.1）”
});
});
<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>
document.cookie="orderList=" + $('.sortable').sortable('toArray').toString();