Given an images gallery and the task is to re-arrange the order of images in the list or grid by dragging and dropping. The jQuery UI framework provides a sortable() function which helps in re-ordering list items by using the mouse. With this functionality, the list items become interchangeable. The jQuery UI provides a sortable() function with default draggable properties. All the list elements in the HTML document are interchangeable and re-ordered for displaying. The user can drag and drop elements to a new position with the help of the mouse. Other elements adjust themselves to fit in the list.
Creating structure: In this section, we normally include the required jQueryUI link and libraries. Also, we will create a basic image gallery where we will perform the drag and drop functionality to reorder the gallery list.
- Including all the required jQuery and jQuery UI libraries:
<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 code to create structure:
<!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
>
chevron_rightfilter_none
Design the structure: In this section, we will design the pre-created structure and add the drag and drop feature by adding JavaScript code.
- CSS code to design the structure:
<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>
chevron_rightfilter_none - JS code to add the functionality:
<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>
chevron_rightfilter_none
Final solution: In this section, we will combine all the above sections codes and achieve our task where you can perform the drag and drop to re-order the images in the image gallery.
- Program:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to create drag and drop
features for images reorder
using HTML CSS and jQueryUI?
</
title
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
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
>
chevron_rightfilter_none - Output: