imageDragSort

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

imageDragSort 封装了一个图片拖拽排序的功能。本插件类似open一个frame,开发者可指定其所依附的窗口(通过fixedOn参数)。开发者只需要传入图片资源,就可以长按图片就可以触发编辑状态,拖动图片进行排序,也可以在长按的过程中删掉图片。传入的图片资源,可以从其他相册相关的插件中获取。

注意: 在 iOS 平台上通过 UIMediaScanner 、UIAlbumBrowser 插件从手机相册获取的图片路径,需调用 transPath 接口转换,然后传给本插件,本插件可通过路径从手机相册获取指定图片。此时,云编译时需要勾选相册访问权限。

open

打开

open({params}, callback(ret, err))

params

rect:

  • 类型:JSON 类型
  • 描述:(可选项)插件的位置及尺寸
  • 内部字段:
{
    x: 0,                              //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,                              //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w:300,                             //(可选项)数字类型;插件宽度(相对于所属的 Window 或 Frame;默认300
    h:600                              //(可选项)数字类型;插件高度(相对于所属的 Window 或 Frame;默认300
}

styles:

  • 类型:JSON 类型
  • 描述:(可选项)插件各部分的样式
  • 内部字段:
{
    mark: {                             //(可选项)JSON对象;长按后显示,删除图标的样式
        icon: '',                       //(可选项)字符串类型;图标路径(本地路径,支持fs://、widget://);默认:删除图标
        size: 20                        //(可选项)数字类型;图标的大小;默认:显示的缩略图的宽度的三分之一
    },
    layout: {
        column:3 ,                       // (可选项)数字类型,图片有几列;默认:3
        margin:15,                       // (可选项)数字类型,图片上下左右间距;默认:15
    }

    
}

imgArray:

  • 类型:数组 类型
  • 描述:所有图片路径组成的数组,图片路径是本地路径,支持fs://、widget://

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)插件视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:插件依附于当前 window

fixed:

  • 类型:布尔类型
  • 描述:(可选项)是否将插件视图固定到窗口上,不跟随窗口上下滚动
  • 默认:false

callback(ret, err)

ret:

  • 类型:JSON 对象内部字段:
{
    status:true,                   // 显示成功
    eventType: 'enterEditMode'     // 字符串类型;该参数仅会在长按进入编辑模式时触发回调
}

示例代码

var imageDragSort = api.require('imageDragSort');
imageDragSort.open({
    rect: {
        x: 0,
        y: 0,
        w: 300,
        h: 600
    },
    styles:{
          mark: {                            
            icon: '',                       
            size: 20                       
         },
         layout: {
            column:3 ,                            
            margin:15,                         
            }
    },
    imgArray:["","",""],
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addImage

再次添加图片

addImage({params}, callback(ret, err))

params

imgArray:

  • 类型:数组 类型
  • 描述:所有图片路径组成的数组,图片路径是本地路径,支持fs://、widget://(所有图片的数量不要超过30张)

callback(ret, err)

ret:

  • 类型:JSON 对象内部字段:
{
    status:true                //添加成功
}

示例代码

var imageDragSort = api.require('imageDragSort');
imageDragSort.addImage({

    imgArray:["","",""],
    
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

startEdit

开始编辑

startEdit()

示例代码

var imageDragSort = api.require('imageDragSort');
imageDragSort.startEdit();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭

close()

示例代码

var imageDragSort = api.require('imageDragSort');
imageDragSort.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示

show(callback(ret, err))

示例代码

var imageDragSort = api.require('imageDragSort');
imageDragSort.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏

hide()

示例代码

var imageDragSort = api.require('imageDragSort');
imageDragSort.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

cancleEditState

取消编辑状态

cancleEditState(callback(ret, err))

callback(ret, err)

ret:

  • 类型:JSON 对象内部字段:
{
    imgArray:["","",""]                //排序后的图片数组
}

示例代码

var imageDragSort = api.require('imageDragSort');
imageDragSort.cancleEditState(
function(ret,err){
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10