jquery drag and drop example

jquery drag and drop example
jQuery UI made it very easy to sort items from one list into another using jquery drag and drop example functionality, by passing the selector into the connectWith option. The simplest way to do this is to group all list items with a CSS class name, and then pass that class name into the sortable function.

In this tutorial, we have used four lists, first two lists are connected each other and can be drag and drop any items into any of these two groups. The other three and four groups connected separately which items can be drag and drop into these three and four groups. For the third group, we have set a limit up to 8 items which you can see in the below jquery code. Due to this limit, you can drop more items into the third group.

Demo and download links for jquery drag and drop example available at the end of this article.

Code for jquery drag and drop:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
	#container{
		margin:0 auto; width:768px;
		font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
	}
	#container h1{
		font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
		font-size: 35px;
		line-height: 35px;
		position: relative;
		font-weight: 400;
		text-align: center;
	}
	#sortable1, #sortable2, #sortable3, #sortable4 {
		border: 1px solid #eee;
		width: 142px;
		min-height: 20px;
		list-style-type: none;
		margin: 0;
		padding: 5px 0 0 0;
		float: left;
		margin-right: 10px;
	}
	#sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li {
		margin: 0 5px 5px 5px;
		padding: 5px;
		font-size: 1.2em;
		width: 120px;
	}
	.ui-state-highlight { height: 1.2em; line-height: 1.2em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable1, #sortable2" ).sortable({
		placeholder: "ui-state-highlight",
		connectWith: ".connectedSortable"
    });
	
	$( "#sortable3, #sortable4" ).sortable({
		placeholder: "ui-state-highlight",
		connectWith: ".connectedSortable2"
    });
	
	$("#sortable3").on("sortreceive", function(event, ui) {
        var $list = $(this);

        if ($list.children().length > 8) {
            $(ui.sender).sortable('cancel');
        }
    });
  } );
  </script>
</head>
<body>
<div id="container">
	<h1>jQuery Drag and Drop example using jQuery UI</h1>
	
	<ul id="sortable1" 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>
	  <li class="ui-state-default">Item 5</li>
	</ul>
	 
	<ul id="sortable2" class="connectedSortable">
	  <li class="ui-state-highlight">Item 1</li>
	  <li class="ui-state-highlight">Item 2</li>
	  <li class="ui-state-highlight">Item 3</li>
	  <li class="ui-state-highlight">Item 4</li>
	  <li class="ui-state-highlight">Item 5</li>
	</ul>

	<ul id="sortable3" class="connectedSortable2">
	  <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>
	  <li class="ui-state-default">Item 5</li>
	</ul>

	<ul id="sortable4" class="connectedSortable2">
	  <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>
	  <li class="ui-state-default">Item 5</li>
	</ul>
 
</div> 
</body>
</html>


Download / Demo

You may also like...