$( function() { $( "#sortable" ).sortable(); } );这个的具体实现代码
时间: 2023-09-02 18:09:30 浏览: 57
这段代码是使用 jQuery UI 中的 Sortable 组件来实现对一个元素列表进行拖拽排序的功能。具体实现步骤如下:
1. 引入 jQuery 和 jQuery UI 的库文件。
```html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
```
2. 在 HTML 中创建一个可排序的元素列表。
```html
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
```
3. 使用 jQuery UI 中的 Sortable 组件初始化该元素列表。
```javascript
$( function() {
$( "#sortable" ).sortable();
} );
```
这样,就可以在页面中看到一个可排序的列表了。当用户拖拽其中的元素时,它们会在列表中重新排序。
相关问题
通过jquery-ui中的sortable来实现拖拽排序
好的,我可以为你解答这个问题。通过jquery-ui中的sortable插件,可以轻松地实现拖拽排序功能。下面是一些基本步骤:
1. 首先,你需要在你的HTML文件中引入jquery和jquery-ui库文件。例如:
```
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
```
2. 在你的HTML文件中,创建一个可以拖拽排序的列表。例如:
```
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
3. 使用jquery-ui中的sortable方法将列表变为可拖拽排序。例如:
```
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
```
4. 可选的,你可以对拖拽排序进行一些自定义设置,例如限制只能在x轴或y轴上拖拽、设置占位符样式等。例如:
```
$( function() {
$( "#sortable" ).sortable({
axis: "y", // 只能在y轴上拖拽
placeholder: "ui-state-highlight" // 占位符样式
});
$( "#sortable" ).disableSelection();
} );
```
希望这些步骤能帮助你实现拖拽排序功能!
Sortable.js的拖拽提示
Sortable.js是一个用于实现拖拽排序的JavaScript库。它可以帮助你创建可拖拽的列表、表格或其他元素,并提供一些有用的提示功能。
要添加拖拽提示,你可以使用Sortable.js提供的一些事件和选项。以下是一个示例,展示了如何使用Sortable.js来创建一个拖拽排序的列表,并添加拖拽提示:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
</head>
<body>
<ul id="sortable-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
var sortableList = Sortable.create(document.getElementById("sortable-list"), {
animation: 150, // 动画持续时间(以毫秒为单位)
ghostClass: "sortable-ghost", // 拖拽元素的样式类
chosenClass: "sortable-chosen", // 选中元素的样式类
dragClass: "sortable-drag", // 拖拽过程中元素的样式类
// 拖拽开始时的回调函数
onStart: function (evt) {
evt.item.classList.add("sortable-dragging");
},
// 拖拽结束时的回调函数
onEnd: function (evt) {
evt.item.classList.remove("sortable-dragging");
}
});
</script>
</body>
</html>
```
在上述示例中,我们创建了一个带有id为"sortable-list"的无序列表,并使用Sortable.create()方法将其转换为可拖拽排序的列表。我们还设置了一些选项,例如动画持续时间、拖拽元素的样式类等。
在拖拽开始时,我们使用onStart回调函数给被拖拽的元素添加了一个名为"sortable-dragging"的样式类,以突出显示正在拖拽的元素。在拖拽结束时,我们使用onEnd回调函数将该样式类移除。
你可以根据自己的需求来定义这些样式类,以实现你想要的拖拽提示效果。