jQuery图片拖动排序和查看图集

所属分类： JQ特效媒体图片展示

查看演示立即下载

插件描述：jQuery图片列表拖动排序(支持多选)，支持动态添加和批量删除

更新时间：2019-07-26 00:11:07

更新说明：优化拖动方法

更新时间：2018/9/3 下午5:28:27

更新说明：修改了删除图片再添加时无法准确定位的BUG。

另：内置getnewarr()方法返回当前排序后图片数组。

使用方法

引用所需要的3个文件

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="/"></script>
<script id="script" src="js/Jsequencing.js" iconfont="true"></script>

设置插件加载的容器img_ul

1	`<div` `class="cl imglist"` `id="img_ul"></div>`

js设置

var imgulp = new Jsequencing({
    listid: "img_ul", //页面图片列表ID
    thumbherf: "img/Thumb/", //列表图片前缀[缩略图]
    bigherf: "img/big/", //原图前缀[同列表图相同时，省略]
    jsondata: true, //数据数组格式
    imgsrcarr: [ //图片数据数组【注一】
        {
            src: "keting.jpg?id=0",
            title: "客厅0"
        },
        {
            src: "keting2.jpg?id=1",
            title: "客厅1"
        },
        {
            src: "keting3.jpg?id=2",
            title: "客厅2"
        },
        {
            src: "keting4.jpg?id=3",
            title: "客厅3"
        },
        {
            src: "chufang.jpg?id=4",
            title: "客厅4"
        }
    ],
});
//动态添加图片的方法
function addimg() {
    imgulp.addimgarr([{
        src: 'weishengjian2.jpg?id=8'
    }])
}

注：如果jsondata选项设为false时，下边的数据格式为：

1	`["keting.jpg?id=0","keting2.jpg?id=1"];`

动态添加图片时也需设置成该格式。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery时间轴播放（原创）
下一个特效： jQuery国籍选择器（包含国籍代码）