从一个列表中拖放jQuery UI可拖动元素并将其放入另一个列表中的问题
您好！您的问题是关于如何使用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元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
