給定一個圖像庫，要求通過拖放來重新排列清單或網格中圖像的順序。jQuery UI架構提供了sortable（）函數，該函數有助于通過使用滑鼠對清單項進行重新排序。使用此功能，清單項可以互換。
jQuery UI提供具有預設可拖動屬性的sortable（）函數。HTML文檔中的所有清單元素都是可以互換的，并可以重新排序以進行顯示。
使用者可以借助滑鼠将元素拖放到新位置。其他元素會自行調整以适合清單。
首先，我們需要建立一個基本的圖檔庫，在其中我們将執行拖放功能以對圖檔庫清單進行重新排序。包括所需的jQuery UI連結和庫。
- 包括所有必需的jQuery和jQuery UI庫，代碼如下：
<link href =“ https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel =“樣式表”>
<script src =“ https：// code。jquery.com/jquery-1.10.2.js”> </ script>
<script src =“ https://code.jquery.com/ui/1.10.4/jquery-ui.js”> </ script> HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>
How to create drag and drop
features for images reorder
using HTML CSS and jQueryUI?
</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>Drag and drop using jQuery UI Sortable</b>
<div class="height"></div><br>
<div id = "imageListId">
<div id="imageNo1" class = "listitemClass">
<img src="images/geeksimage1.png" alt="">
</div>
<div id="imageNo2" class = "listitemClass">
<img src="images/geeksimage2.png" alt="">
</div>
<div id="imageNo3" class = "listitemClass">
<img src="images/geeksimage3.png" alt="">
</div>
<div id="imageNo4" class = "listitemClass">
<img src="images/geeksimage4.png" alt="">
</div>
<div id="imageNo5" class = "listitemClass">
<img src="images/geeksimage5.png" alt="">
</div>
<div id="imageNo6" class = "listitemClass">
<img src="images/geeksimage6.png" alt="">
</div>
</div>
<div id="outputDiv">
<b>Output of ID's of images : </b>
<input id="outputvalues" type="text" value="" />
</div>
</body>
</html> CSS代碼：
<style>
/* text align for the body */
body {
text-align: center;
}
/* image dimension */
img {
height: 200px;
width: 350px;
}
/* imagelistId styling */
#imageListId {
margin: 0;
padding: 0;
list-style-type: none;
}
#imageListId div {
margin: 0 4px 4px 4px;
padding: 0.4em;
display: inline-block;
}
/* Output order styling */
#outputvalues {
margin: 0 2px 2px 2px;
padding: 0.4em;
padding-left: 1.5em;
width: 250px;
border: 2px solid dark-green;
background: gray;
}
.listitemClass {
border: 1px solid #006400;
width: 350px;
}
.height {
height: 10px;
}
</style> 最後，我們通過添加JavaScript代碼來添加拖放功能。
JS代碼：
<script>
$(function() {
$("#imageListId").sortable({
update: function(event, ui) {
getIdsOfImages();
} //end update
});
});
function getIdsOfImages() {
var values = [];
$('.listitemClass').each(function(index) {
values.push($(this).attr("id")
.replace("imageNo", ""));
});
$('#outputvalues').val(values);
}
</script> 最後，我們将整合以上所有的代碼，然後，在其中執行拖放操作以對圖庫中的圖像進行重新排序。
- 最終代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>
How to create drag and drop
features for images reorder
using HTML CSS and jQueryUI?
</title>
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src =
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src =
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
/* text align for the body */
body {
text-align: center;
}
/* image dimension */
img{
height: 200px;
width: 350px;
}
/* imagelistId styling */
#imageListId
{
margin: 0;
padding: 0;
list-style-type: none;
}
#imageListId div
{
margin: 0 4px 4px 4px;
padding: 0.4em;
display: inline-block;
}
/* Output order styling */
#outputvalues{
margin: 0 2px 2px 2px;
padding: 0.4em;
padding-left: 1.5em;
width: 250px;
border: 2px solid dark-green;
background : gray;
}
.listitemClass
{
border: 1px solid #006400;
width: 350px;
}
.height{
height: 10px;
}
</style>
<script>
$(function() {
$( "#imageListId" ).sortable({
update: function(event, ui) {
getIdsOfImages();
}//end update
});
});
function getIdsOfImages() {
var values = [];
$('.listitemClass').each(function (index) {
values.push($(this).attr("id")
.replace("imageNo", ""));
});
$('#outputvalues').val(values);
}
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>Drag and drop using jQuery UI Sortable</b>
<div class="height"></div><br>
<div id = "imageListId">
<div id="imageNo1" class = "listitemClass">
<img src="images/geeksimage1.png" alt="">
</div>
<div id="imageNo2" class = "listitemClass">
<img src="images/geeksimage2.png" alt="">
</div>
<div id="imageNo3" class = "listitemClass">
<img src="images/geeksimage3.png" alt="">
</div>
<div id="imageNo4" class = "listitemClass">
<img src="images/geeksimage4.png" alt="">
</div>
<div id="imageNo5" class = "listitemClass">
<img src="images/geeksimage5.png" alt="">
</div>
<div id="imageNo6" class = "listitemClass">
<img src="images/geeksimage6.png" alt="">
</div>
</div>
<div id="outputDiv">
<b>Output of ID's of images : </b>
<input id="outputvalues" type="text" value="" />
</div>
</body>
</html> 最終輸出效果：
本文完~