Sortable.js的拖拽提示

Sortable.js是一个强大的JavaScript库，用于实现拖放排序功能。要添加拖拽提示，你可以使用Sortable.js的`ghostClass`选项。

首先，确保你已经引入了Sortable.js库。然后，在创建Sortable实例时，将`ghostClass`选项设置为一个自定义的CSS类名。这个类名将被应用到拖动的元素的副本上。

例如，假设你有一个HTML列表，你想要让列表项在拖拽时显示一个提示。你可以按照以下步骤添加拖拽提示：

1. 创建一个CSS类，定义你想要应用到拖动元素副本上的样式。例如，你可以给它添加一个透明度和一个阴影效果：

.dragging {
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

2. 在JavaScript代码中，创建Sortable实例时，将`ghostClass`选项设置为你定义的CSS类名：

new Sortable(listElement, {
  ghostClass: 'dragging',
  // 其他选项...
});

现在，当你拖动列表项时，它将显示为半透明，并带有阴影效果，从而提供了一个拖拽提示。

请注意，`ghostClass`选项只会应用到拖动元素的副本上，而不是实际的列表项本身。这样

相关问题

sortable.js失效

sortable.js是一个JavaScript库，用于创建可拖拽和排序的列表。如果sortable.js失效，可能是由于以下几种原因：

1. 引入错误：在页面中引入sortable.js文件时，可能由于路径错误或文件不存在而导致sortable.js失效。请确保正确引入sortable.js文件并检查文件路径。

2. 依赖问题：sortable.js可能需要依赖其他的JavaScript库或版本，如果缺少了依赖项或使用了不兼容的版本，则sortable.js可能会失效。请检查sortable.js的依赖项，并确保正确引入和使用它们。

3. HTML结构错误：sortable.js需要特定的HTML结构来工作，例如要对列表进行排序，需要使用合适的HTML标签和类名。如果HTML结构不正确，sortable.js可能无法正常工作。请检查HTML结构，并确保与sortable.js的要求匹配。

4. 初始化问题：sortable.js在使用前需要进行初始化，以便正确地绑定事件和设置选项。如果未正确初始化sortable.js，则可能会导致其失效。请查看sortable.js的文档，并确保按照正确的方式进行初始化。

5. 其他代码冲突：如果页面中存在其他与sortable.js相冲突的JavaScript代码或库，可能会导致sortable.js失效。请检查其他代码，并确保没有冲突或重复的函数、变量等。

如果仍然无法解决sortable.js失效的问题，请参考sortable.js的文档和支持资源，以获取更详细的帮助和支持。

sortable.js 拖动排序结果通过保存按钮发送后台

要使用 sortable.js 来实现拖动排序，并将排序结果发送到后台，您需要遵循以下步骤：

1. 引入 sortable.js 库

在页面中引入 sortable.js 库，可以从官方网站下载或使用 CDN。

2. 创建可排序的列表

使用 HTML 和 CSS 创建可排序的列表。在每个列表项中添加一个唯一的标识符，以便在排序后将其发送到后台。

3. 初始化 sortable.js

在 JavaScript 中初始化 sortable.js。使用 onEnd 回调函数来捕获排序事件，并获取排序结果。

4. 将结果发送到后台

在 onEnd 回调函数中，将排序结果发送到后台。您可以使用 AJAX 或其他方法来完成此操作。

以下是示例代码：

HTML：

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

<button id="save">Save</button>

JavaScript：

// 初始化 sortable.js
var sortable = Sortable.create(document.getElementById('sortable'), {
  onEnd: function (evt) {
    // 获取排序结果
    var items = sortable.toArray();
    // 将结果发送到后台
    $.ajax({
      url: '/save',
      type: 'post',
      data: { items: items },
      success: function (response) {
        console.log(response);
      }
    });
  }
});

// 保存按钮点击事件
$('#save').click(function () {
  // 获取排序结果
  var items = sortable.toArray();
  // 将结果发送到后台
  $.ajax({
    url: '/save',
    type: 'post',
    data: { items: items },
    success: function (response) {
      console.log(response);
    }
  });
});

在上面的示例代码中，我们使用 jQuery 的 AJAX 方法将排序结果作为 POST 请求发送到 /save 路径。您需要根据自己的需求更改此代码以适应您的应用程序。