极客教程如何使用HTML CSS和jQueryUI创建一个拖放功能来重新安排图片的顺序
给定一个图片库，任务是通过拖放来重新排列列表或网格中的图片顺序。jQuery UI框架提供了一个sortable()函数，它有助于通过使用鼠标来重新排列列表项。有了这个功能，列表中的项目就可以互换了。jQuery UI提供的sortable()函数具有默认的可拖动属性。在HTML文档中的所有列表元素都是可以互换的，并重新排序显示。用户可以在鼠标的帮助下将元素拖到一个新的位置。其他元素会自行调整以适应列表。
创建结构：在这一部分，我们通常包括所需的jQueryUI链接和库。另外，我们将创建一个基本的图片库，在这里我们将执行拖放功能来重新排列图片库的列表。
- 包括所有需要的jQuery和jQuery UI库。
<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>
- 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>
设计结构：在本节中，我们将设计预先创建的结构，并通过添加JavaScript代码添加拖放功能。
- 用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>
- 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>
- 输出:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例，从基础开始学习jQuery。