您好!您的问题是关于如何使用jQuery UI库中的可拖放功能将元素从一个列表拖动到另一个列表中。以下是一个简单的示例,展示了如何实现这个功能:
首先,确保您已经在HTML文件中包含了jQuery和jQuery UI库的链接:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI 拖放示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- 列表1 -->
<ul id="list1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
</ul>
<!-- 列表2 -->
<ul id="list2" class="connectedSortable">
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
<li class="ui-state-default">Item 8</li>
</ul>
<script>
$( function() {
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
} );
</script>
</body>
</html>
在这个示例中,我们创建了两个无序列表(<ul>
),它们都有一个类名为connectedSortable
。我们使用jQuery UI的.sortable()
方法将这两个列表连接在一起,以便可以将列表项(<li>
)从一个列表拖动到另一个列表中。
.sortable()
方法接受一个配置对象,其中connectWith
属性定义了可以连接的元素的选择器。在这个例子中,我们使用.connectedSortable
选择器来匹配两个列表。
.disableSelection()
方法禁用文本选择,以防止在拖动元素时选择文本。
这个示例展示了如何使用jQuery UI库中的可拖放功能将元素从一个列表拖动到另一个列表中。希望这对您有所帮助!
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云