jQuery拖动图片自定义排序代码

以下是一个简单的示例，使用jQuery UI中的sortable和draggable插件实现拖动图片自定义排序：

HTML代码：

<ul id="sortable">
  <li class="ui-state-default"><img src="image1.jpg"></li>
  <li class="ui-state-default"><img src="image2.jpg"></li>
  <li class="ui-state-default"><img src="image3.jpg"></li>
  <li class="ui-state-default"><img src="image4.jpg"></li>
</ul>

JavaScript代码：

$(function() {
  $("#sortable").sortable({
    axis: "y", // 只允许在垂直方向上拖动
    cursor: "move", // 拖动时的鼠标样式
    opacity: 0.6, // 拖动时的透明度
    containment: "parent", // 限制拖动范围为父元素
    update: function(event, ui) { // 拖动完成后的回调函数
      var order = $(this).sortable("toArray"); // 获取排序后的元素ID数组
      console.log(order); // 输出排序后的元素ID数组，可以根据该数组进行后续操作
    }
  }).disableSelection(); // 禁止选中排序元素的内容

  $("li").draggable({
    connectToSortable: "#sortable", // 允许拖动到#sortable中
    helper: "clone", // 拖动时克隆原始元素
    revert: "invalid" // 拖动结束后如果未放置到#sortable中则回到原位
  });
});

上述代码中，sortable插件用于排序，draggable插件用于拖拽。在排序完成后，可以通过jquery的sortable方法获取排序后的元素ID数组，根据该数组进行后续操作。