可保存的拖拽排序、拖拽排序、拖拽排序,重要的说三遍！

白菜贝贝 · 2022-11-24 17:39 上传

本帖最后由 gczxxu 于 2022-11-24 17:46 编辑

补个提醒，以下代码只支持手机版的图文列表，PC端的，对应修改 CSS名称即可，代码中已用重点注释出来了

话说格子经过多次快速升级后，越来越好用（说老实话。。我是直接从7跳到了8.103了，中间忙，没空试其它版本），怎么才能更好的仿原生APP也提上了学习日程。今天给大家带来仿原生APP的其中一个内容：拖拽排序，这里只演示图文列表的实现，其它的表格等可根据需要自行实现。

1669255048_clip.gif975467529.png

所需要的工具：
Sortable.js 调用链接
还需要一点JS基础和CSS基础

图文列表所在页面的加载代码：图文列表组件CSS中加入 DragSort 样式名称

Forguncy.Page.bind("pageDefaultDataLoaded", function (arg1, arg2) {
RestTable("sfdsf");
setTimeout(
      function (props) {
                  FillNum();
         let el = document.querySelector('.DragSort .repeater-container')//重点：选择包裹器。如果是表格，则是对应 table元素
         var sortable = new Sortable(el, {
            handle: ".handle",// 拽手柄，可以设置在图片或按钮等组件上
            animation: 150,//设置动画时长
            // Element dragging started
            onStart: function (/**Event*/evt) {
                  evt.oldIndex;
            },
            // Element dragging ended
            onEnd: function (/**Event*/evt) {
                  var lis = $(".repeater-container .repeater-item");//重点：选择可拖拽的队列。如果是表格，则是对应 tr 元素

                  sortarr = new Array;
                  // 拖拽完毕后重新设置序号，使其连续
                  for (var i = 0; i < lis.length; i++) {
                     var no = $(lis).find("input:eq(0)");//重点：临时序号元素，也可以用其它DOM元素替代，看自己需要
                     no.val(i);
                     // 利用KV对象临时保存排序情况，待退出时写入表格并提交
                     var sortobj = {
                        key: $(lis).find(".sortnum label")[0].textContent,
                        value: i
                     }
                     sortarr.push(sortobj);
                  }
                  console.log(sortarr);
                  // ReplaceTable("ddd",sortarr);
            }
         });
      },
      500,
)
});
function FillNum(){
var lis = $(".repeater-container .repeater-item");
for (var i = 0; i < lis.length; i++) {
      var no = $(lis).find("input:eq(0)");
      no.val(i);
}
}

全局代码：这里默认都数据表组件名均为"表格1"，数据表排序字段名均为  "序号"

var sortarr=new Array();

function ReplaceTable(tablename, arrobj) {
tablename = "表格1";

var page = Forguncy.Page;
var listview = page.getListView(tablename);
var count = listview.getRowCount();
arrobj.forEach(ele => {
      listview.setValue(ele.key,"序号",ele.value);
});
}

function RestTable(tablename){
tablename = "表格1";

var page = Forguncy.Page;
var listview = page.getListView(tablename);
var count = listview.getRowCount();
for (let i = 0; i < count; i++) {
      // const ele = array[index];
      listview.setValue(i,"序号",i);
}
}

操作步骤：
新建一页面，放图数据表和图文列表组件，并在表组增加一个"排序"列(如图)

编辑图文列表模板，拖拽图标设置CSS名称为handle，排序组件设置为输入框，并根据自己喜好更改样式

在退出当前页面时，执行以下命令，这里偷懒了。表格名称在前面代码中被写死。这里的 ddd 无含义。

然后呢。没有然后了。。就这么简单愉快的结束了。。运行一下，试试吧。
"快捷菜单"中执行上图命令，"退出排序"为直接退出或返回，放弃排序操作

下面放上demo，欢迎大家研究