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

所属分类:UI,媒体-筛选及排序,图片展示

 38253  388  查看评论 (49)
分享到微信朋友圈
X
jQuery图片拖动排序和查看图集 ie兼容9

更新时间: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="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script id="script" src="js/Jsequencing.js" iconfont="true"></script>

设置插件加载的容器img_ul

<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时,下边的数据格式为:

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

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

相关插件-筛选及排序,图片展示

angular过滤搜索

angular主要用于对数据的过滤搜索,代码注释很全,适合新手学习
  筛选及排序
 29447  330

jQuery根据条件筛选数据

jQuery根据输入关键字和选择的条件进行筛选,常用代码简单实用。
  筛选及排序
 28422  332

jquery仿app产品筛选列表

jquery仿app产品筛选列表
  筛选及排序
 55218  398

前端表格排序插件,支持ajax分页

jQuery前端表格排序插件,支持ajax分页,后端分页只排序当前页,或前端分页排序
  筛选及排序
 37140  366

讨论这个项目(49)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    冷风过境 0
    2021/12/9 11:13:46
    获取最新数组 数据没值 回复
    Joey 0
    2021/10/30 19:48:25
    很不错 正好满足需求 回复
    大刘 0
    2021/4/10 8:34:17
    能根据具体情况用吗?能通用吗? 回复
    ?ㄣ晨冬之雪 0
    2020/8/29 9:25:20
    效果真的挺不错的 回复
    L.? 0
    2020/4/17 15:32:52
    0
    2020/4/1 16:58:03
    可以添加修改选中项的title吗? 回复
    !... ! 0
    2020/2/29 9:48:27
    就差选择文件夹图片了,其他都很不错 回复
    !... ! 0
    2020/2/29 9:47:52
    心有此关 0
    2019/12/25 15:04:09
    我好像找到原因了 这个imglist一开始是display:none的 然后我点一个按钮 才让这个list显示出来(是个弹窗) 然后就会这样
        乜级圣人1
        2019/12/25 15:11:13
        哦 ,那就是宽度没取到;js中64行box_w变量取宽度。
        soyoyo1
        2020/4/18 3:39:31
        我也遇到一样的问题,场景是在弹出的模态框中显示图片选择。解决方法是把new?Jsequencing的动作放到模态框显示的动作后面,这样就能取到宽度
    回复
    心有此关 0
    2019/12/25 14:54:31
    class="item" id="img_ul_item2" item="2" col="NaN" few="Infinity" style="transition-duration: 0ms;" 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复