jquery-ui sortable 排序

 

https://blog.csdn.net/u013066244/article/details/51954198

<link ref="stylesheet" href="jquery-ui.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<div class="form-group">
　　<label class="control-label col-sm-1">曲谱图片</label>
　　<ul id="layer-img" class="control-label col-sm-9 sortable" style="text-align: left;">
　　　　<volist name="data.image" id="image">
　　　　　　<li class="portlet" style="display: inline-block" id="{$image['id']}">
　　　　　　　　<img id="sheet_img{$image['id']}" src="{$image['url']}" alt="">
　　　　　　</li>
　　　　</volist>
　　</ul>
</div>

<script>
    $('.sortable').sortable({
        items: "li", //只是li可以拖动
        opacity: 0.6, //拖动时，透明度为0.6
        cursor: "move", // 拖拽时的鼠标形状
　　　　 forceHelperSize: true, // 自适应placeholder的大小
        //appendTo: '.drag-task', // 拖拽的父级节点(该节点一定要注意，配置错误会导致当前屏幕外的元素没法自动滚动拖拽，两列之间拖拽的滚动也会出问题)
        placeholder: "portel-placeholder"  //设定占位符，事先设定占位符的样式，拖曳时会出现占位符
        // 拖拽时的倾斜度 
         rotate: '5deg', 
        // 延迟时间(毫秒)，避免和click同时操作时出现的冲突 
         delay: 150, 
        // 以clone方式拖拽 
         helper: 'clone', 
         // 拖拽到边框出现滚动的间距， 
         scrollSensitivity:scrollingSensitivity, 
         // 应用于拖拽空白区域的样式 
         placeholder: 'portlet-placeholder ui-state-highlight', 
         // 允许拖拽预留空白区域 
　　　　　forcePlaceholderSize: true, 
　　　　　// 多个列表之间的拖拽的dom元素 
        //connectWith: '.task-lists',
        update: function() {  //因为是要拖曳改变图片顺序，所以选择update,拖曳更新后调用函数
            var image_ids = $('.sortable').sortable('toArray', {attribute: id});//获取class为sortable的子级的id属性值，并转化为数组；
            $.ajax({
                type: "post",
                url: "",
                data: {image_ids},
                dataType: "json",
                success: function(result) {
                    window.location.reload(); //后台获取到数据刷新页面
                }
            });
        }
    });
</script>

stop: (e, ui) => {
          // 当前拽入的元素
          let item = $(ui.item)
          // 当前拽入元素的下标
          let index = item.index()
          let kid = ''
          // xxxx 这里面可以操作数据更新
        },
        // 开始拖拽时的函数
        start: (e, ui) => {
          // 拖拽前的父级节点
          dragBeforeParentNode = ui.item[0].parentNode
          // 让placeholder和源高度一致
           ui.placeholder.height(ui.helper[0].scrollHeight).width(258)
           // xxxx  这里可以记录一些拖拽前的元素属性
        },
        // 处理两列滚动条问题
        sort:function(event, ui){
          var scrollContainer = ui.placeholder[0].parentNode
          // 跨列拖拽的情况
          if (dragBeforeParentNode && dragBeforeParentNode.id !== scrollContainer.id) {
            // 设置拽入的列表的滚动位置
            var overflowOffset = $(scrollContainer).offset()
            if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) {
              scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed
            } else if(event.pageY - overflowOffset.top < scrollingSensitivity) {
              scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed
            }
          }
        }

sort:function(e, ui){
array = [];
select_item = ui.item; //当前拖动的元素
var select_id = select_item.attr("id");
select_sort = select_item.attr("sort"); //当前元素的顺序
//alert(select_item);
place_item = $(this).find('tr').filter('.ui-sortable-placeholder').next('tr');//新位置下的下一个元素
place_sort = place_item.attr('sort');

place_sx = parseInt(place_sort);
select_sx = parseInt(select_sort);

if(select_sx > place_sx){ //说明是 向上移动
//array.push(select_id);
temp = place_sort;
place_sx = select_sort;//最大
select_sx = temp;//最小
flag = false;
}else{ //向下移动
    place_sort = $(this).find('tr').filter('.ui-sortable-placeholder').prev('tr').attr('sort');
    place_sx = parseInt(place_sort);
    flag = true;
}
},
    stop:function(e, ui){
    //ui.item.removeClass("ui-state-highlight"); //释放鼠标时，要用ui.item才是释放的行
    //发送请求，对sort字段进行修改
    //alert(ui.item.attr("id"));//可以拿到id
    //alert(ui.position.top);//可以拿到id
    var temp = "";
    #{list items:eventTypeList, as:'n'}
    var sort = parseInt(${n.sort});
    if(sort >= select_sx && sort <= place_sx){

    if(sort == parseInt(select_sort)){//当前拖拽的元素 向上拖拽，当前元素放在数组第一个，向下，放在数组最后一个
        if(flag){//向下 - 按顺序来
            temp = ${n.id};
        }else{//向上排序
            array.splice(0,0,${n.id});
        }
    }else{
         array.push(${n.id});
    }
    }