jq-ui的Sortable插件两列布局左右拖拽

最新推荐文章于 2024-08-13 08:02:04 发布

shl999

最新推荐文章于 2024-08-13 08:02:04 发布

阅读量3.8k

点赞数 4

分类专栏：插件文章标签： html stylesheet 插件

本文链接：https://blog.csdn.net/u014665035/article/details/52370484

版权

该博客介绍了如何利用jQuery UI的Sortable插件实现一个两列布局，允许用户通过拖拽在左右两列之间进行元素排序。首先，引入jQuery UI库和相关样式，接着设置基本样式。然后，编写HTML结构，并使用jQuery代码来初始化Sortable功能。最终，实现了可交互的拖拽排序效果。

摘要由CSDN通过智能技术生成

html页面传送门—–http://pan.baidu.com/s/1c21Fqhi

1.先引入

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2.简单样式

<style>
        ul {
    border: 1px solid Black;height: 500px;width: 100%;display: inline-block;vertical-align: top;padding:0;}
        li {
    list-style-type: none;padding: 10px;}
        li span