Breaking News: Grepper is joining You.com. Read the official announcement!

Drag and drop using jQuery UI Sortable

@CodeGrepperManu answered on February 13, 2023 Popularity 7/10 Helpfulness 6/10

answer Drag and drop using jQuery UI Sortable

Drag and drop using jQuery UI Sortable

Comment

<!DOCTYPE html>
<html>
<head>
	<title>
	Drag and Drop image to get sequence or index
	</title>
	<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>

</head>
	
<body>
	
	<b>Drag and drop using jQuery UI Sortable</b>
	
	<div class="height"></div><br>
	
	<div id = "imageListId">
		<div id="imageNo1" class = "listitemClass">
			<img class="headerimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Ocean_from_Leblon.jpg/220px-Ocean_from_Leblon.jpg" alt="">
		</div>
		
		<div id="imageNo2" class = "listitemClass">
			<img class="headerimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/44_-_Iguazu_-_D%C3%A9cembre_2007.jpg/310px-44_-_Iguazu_-_D%C3%A9cembre_2007.jpg" alt="">
		</div>
		
		<div id="imageNo3" class = "listitemClass">
			<img class="headerimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Expn7398_%2839695069782%29.jpg/250px-Expn7398_%2839695069782%29.jpg" alt="">
		</div>
		
		<div id="imageNo4" class = "listitemClass">
			<img class="headerimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Galunggung.jpg/250px-Galunggung.jpg" alt="">
		</div>
		
		<div id="imageNo5" class = "listitemClass">
			<img class="headerimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bachalpsee_reflection.jpg/250px-Bachalpsee_reflection.jpg" alt="">
		</div>
		
		<div id="imageNo6" class = "listitemClass">
			<img class="headerimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/250px-Shaqi_jrvej.jpg" alt="">
		</div>
	</div>
	
	<div id="outputDiv">
		<b>Output of ID's of images : </b>
		<input id="outputvalues" type="text" value="" />
	</div>
</body>
<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>
<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>

</html>

Popularity 7/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: drag-and-drop get image javascript jquery jquery-ui using

Link to this answer
Share Copy Link

Contributed on Feb 13 2023

@CodeGrepperManu

0 Answers Avg Quality 2/10

Drag and drop using jQuery UI Sortable

Contents

More Related Answers

Drag and drop using jQuery UI Sortable

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.