<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});

    }

    }