本文为大家分享了jQuery ui插件合适的实现自由拖动排序的具体方法,供大家参考,具体内容如下
此为网上资源演示自己做了修改,记录下方便日后的学习。
效果展示:
代码展示:
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; !
学习功能:使用jquery ui的合适的插件实现拖动排序
作者:丽莎于2018-5-30
——比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>终极版拖动排序& lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1”比;
& lt;链接rel="样式表" href="比;
& lt; style>
* {
保证金:0;
填充:0;
box-sizing: border-box;
}
.container {
宽度:350 px;
保证金:60 px汽车;
}
.container:{后
内容:“”;
显示:块;
明确:;
}
.drag {
宽度:100%;
高度:60 px;
浮:左;
保证金:8 px 0;
}
ul李{
list-style:没有;
}
.innerdiv {
填充:10 px;
高度:100%;
}
.innerdiv2 {
边界:1 px固体# bdb9b9;
背景:# fff;
高度:100%;
}
.move {
宽度:65 px;
高度:100%;
背景:粉色;
浮:正确;
光标:指针;
}
.msg {
显示:inline-block;
宽度:130 px;
填充:6 px 6 px 6 px 12 px;
vertical-align:最高;
}
.btn {
背景:粉色;
颜色:# fff;
填充:0 px 10 px;
border - radius: 4 px;
边界:1 px;
高度:30 px;
光标:指针;
字体大小:1.4快速眼动;
浮:正确;
margin-right: 10 px;
margin-top: 10 px;
}
& lt;/style>
& lt;脚本src=" http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" http://code.jquery.com/ui/1.10.4/jquery-ui.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="容器"比;
& lt; ul类=昂鲜实摹北?
李& lt; id=癲raggable1”class=巴稀北?
& lt; div类=癷nnerdiv”比;
& lt; div类=癷nnerdiv2”比;
& lt; div类="移动"祝辞& lt;/div>
& lt;跨类=拔毒弊４莑ist1
& lt;/div>
& lt;/div>
& lt;/li>
李& lt; id=癲raggable2”class=巴稀北?
& lt; div类=癷nnerdiv”比;
& lt; div类=癷nnerdiv2”比;
& lt; div类="移动"祝辞& lt;/div>
& lt;跨类=拔毒弊４莑ist2
& lt;/div>
& lt;/div>
& lt;/li>
李& lt; id=癲raggable3”class=巴稀北?
& lt; div类=癷nnerdiv”比;
& lt; div类=癷nnerdiv2”比;
& lt; div类="移动"祝辞& lt;/div>
& lt;跨类=拔毒弊４莑ist3
& lt;/div>
& lt;/div>
& lt;/li>
李& lt; id=癲raggable4”class=巴稀北?
& lt; div类=癷nnerdiv”比;
& lt; div类=癷nnerdiv2”比;
& lt; div类="移动"祝辞& lt;/div>
& lt;跨类=拔毒弊４莑ist4
& lt;/div>
& lt;/div>
& lt;/li>
李& lt; id=癲raggable5”class=巴稀北?
& lt; div类=癷nnerdiv”比;
& lt; div类=癷nnerdiv2”比;
& lt; div类="移动"祝辞& lt;/div>
& lt;跨类=拔毒弊４莑ist5
& lt;/div>
& lt;/div>
& lt;/li>
李& lt; id=癲raggable6”class=巴稀北?
& lt; div类=癷nnerdiv”比;
& lt; div类=癷nnerdiv2”比;
& lt; div类="移动"祝辞& lt;/div>
& lt;跨类=拔毒弊４莑ist6
& lt;/div>
& lt;/div>
& lt;/li>
& lt;/ul>
& lt;按钮类=" btn "祝辞提交& lt;/button>
& lt;/div>
& lt;/body>
& lt;/html>
& lt; script>
$(函数(){
var bttn=$ ('。容器.btn”);
var arr=?
var=$ (“.sortable”) .sortable ({
处理:“.move”,
延迟:0,
光标:“移动”,
回复:真的,
站:bttn。点击(函数(事件){//记录排序后的id顺序数组
var arr=$ (“.sortable”) .sortable (“toArray”);
console.log (arr);
}）
});
});
& lt;/script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
