网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款轻量级jQuery排序插件,通过拖放的方式对accordion项重新排序。
1. 在页面中加载accordion脚本需要jqueryui的accordion组件和可排序的交互插件文件。
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
2. 创建一个无序的accordion组件,如下所示。
<div id="accordion">
<div class="group" data-section-id="1">
<h3>Accordion 1</h3>
<div>
<ul class="sortable" data-list-id="1">
<li data-item-id="1"><span class="draggable"></span>Item 1</li>
<li data-item-id="2"><span class="draggable"></span>Item 2</li>
<li data-item-id="3"><span class="draggable"></span>Item 3</li>
...
</ul>
</div>
</div>
<div class="group" data-section-id="2">
<h3>Accordion 2</h3>
<div>
<ul class="sortable" data-list-id="2">
<li data-item-id="11"><span class="draggable"></span>Item 11</li>
<li data-item-id="12"><span class="draggable"></span>Item 12</li>
<li data-item-id="13"><span class="draggable"></span>Item 13</li>
...
</ul>
</div>
</div>
...
</div>
3. 初始化插件。
$("#accordion").accordion({
header: "> div > h3",
event: "click",
active: false,
collapsible: true
// more jQuery UI Accordion options here
})
4. 创建分类。
.sortable({
// axis: "y",
items: "> div",
handle: "h3",
stop: function(e, ui) {
var sectionList = $(this).sortable("toArray", {attribute: "data-section-id"});
var sectionId = ui.item[0].dataset.sectionId;
var data = JSON.stringify({sectionId, sectionList}, null, 2);
$('.data').text(data);
ui.item.children("h3").triggerHandler("focusout");
$(this).accordion("refresh");
}
});
$(".sortable").sortable({
// axis: "y",
items: "> li",
handle: ".draggable",
revert: true,
revertDuration: 50,
opacity: 1,
placeholder: "ui-sortable-placeholder",
sort: function(event, ui){ ui.item.addClass("selected"); },
stop: function(event, ui){ ui.item.removeClass("selected"); },
update: function(e, ui) {
var questionList = $(this).sortable("toArray", {attribute: "data-item-id"});
var sectionId = e.target.dataset.listId;
var questionId = ui.item[0].dataset.itemId;
updateData({sectionId, questionId, questionList});
}
});
function updateData(obj) {
var data = JSON.stringify(obj, null, 2);
$('.data').text(data);
}
5.打印排序后的数据。
<div class="display">
<details>
<summary>View updated data</summary>
<pre class="data">{}</pre>
</details>
</div>
转载请注明来源:jQuery拖动排序插件
本文永久链接地址:https://www.moyouyouw.cn/code/905.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论