Jquery-ui可排序-隐藏原始列表，而拖动隐藏被拖动的项

Jquery-ui是一个基于jQuery的UI库，提供了丰富的交互组件和效果，其中包括可排序功能。可排序功能允许用户通过拖动来重新排序列表中的项。

在使用Jquery-ui的可排序功能时，可以通过设置参数来实现隐藏原始列表并拖动隐藏被拖动的项的效果。具体步骤如下：

引入Jquery和Jquery-ui的库文件：

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

创建一个HTML列表，并给每个列表项添加一个唯一的标识符：

<ul id="sortable">
  <li class="sortable-item" data-id="1">Item 1</li>
  <li class="sortable-item" data-id="2">Item 2</li>
  <li class="sortable-item" data-id="3">Item 3</li>
  <li class="sortable-item" data-id="4">Item 4</li>
</ul>

使用jQuery选择器选中可排序的列表，并调用sortable()方法来初始化可排序功能：

$(function() {
  $("#sortable").sortable({
    axis: "y", // 设置只能在垂直方向上拖动
    containment: "parent", // 设置拖动范围为父元素
    update: function(event, ui) {
      // 拖动完成后的回调函数
      // 可以在这里进行相应的操作，比如保存排序结果等
    }
  });
});

通过上述代码，我们实现了可排序的功能。当用户拖动列表项时，其他列表项会自动调整位置。而隐藏原始列表和拖动隐藏被拖动的项的效果可以通过CSS样式来实现，例如：

.sortable-item {
  display: none; /* 隐藏原始列表项 */
}

.ui-sortable-helper {
  display: none; /* 隐藏被拖动的项 */
}

这样，当用户拖动列表项时，原始列表项会被隐藏，被拖动的项也会被隐藏，从而实现了隐藏原始列表和拖动隐藏被拖动的项的效果。

Jquery-ui的可排序功能可以广泛应用于需要用户自定义排序的场景，比如拖拽排序的菜单、图片排序等。对于腾讯云相关产品，推荐使用腾讯云的云服务器（CVM）来搭建网站或应用，腾讯云云数据库（TencentDB）来存储数据，腾讯云对象存储（COS）来存储多媒体文件，腾讯云CDN来加速内容分发。具体产品介绍和链接如下：