缩略图排序拖拽实现图层z-index排序

上一篇介绍了如何生成缩略图,顺便再整理一下拖拽排序(但是没有实现想要的功能,只是实现了排序和图层交互功能)

如果玩过ps或者是Axure的朋友会知道,在设计图层时右下角有个图层对应的缩略图,缩略图拖拽分组可实现图层index优先级。

本来是想实现以下功能

1.拖拽排序

2.新建分文件夹分组

3.组内排序

类似axure这样的:

缩略图排序拖拽实现图层z-index排序_第1张图片

 

结果。。。。由于时间问题没有实现。如果有人实现了,希望可以分享以下,我找了好久没有找到

 

后面只实现第一点:采用的是jquery的插件sortable

初始化:

$(".pagesLaySmallViewContent").sortable({
        //cursor:"move",
        //items:"div",
        opacity: 0.6,                       //拖动时,透明度为0.6
        axis:"y",//只能纵向拖动
        scroll:"true",
        update : function(event, ui){       //更新排序之后
            //当前对象
            //let obj =ui.item;
        }
    });

由于我的页面结构是一个缩略图一个div,所以默认items值。

监听排序功能

$(".pagesLaySmallViewContent").bind("sortupdate", function(event, ui) {});

ui.item ;//获取拖拽对象

$(this).sortable("toArray") ;//重新排序后的div顺序,存在数组里面

这样就能实现拖拽效果。

 

由于数据结构问题,不能展示效果

实现z-index思路:

图层信息存放到一个json数组里面,一一对应。排序后需要动态修改数组对象属性index值

可以比较sortable排序后的对象的位置跟原来图层数组位置,然后就是数组操作了。

不是很满意,后期做了图层与缩略图交互功能,感觉可以维护成一个插件了更好。

(⊙o⊙)…

转载于:https://www.cnblogs.com/yflbk-2016/p/11356590.html

你可能感兴趣的:(缩略图排序拖拽实现图层z-index排序)