NiceSnippets.com
Jquery UI Drag and Drop from One List to Another Listbox
Here, you will learn how to create an example for drag and drop list elements from one box to another box. here I will give to download source code and also demo for jquery drag and drop from one listbox to another.
I simply use jquery ui for drag and drop so, you can easily use with your php, laravel, CodeIgniter, .net etc language project. Here we will create two boxes with div container and then we will add li element and you can easily drag and drop from one to another container. very simple example so you can easily customize that.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Drag & Drop</title>
<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>
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="draggable-main">
<h1>jQuery Drag & Drop</h1>
<div class="box">
<ul class="connected-sortable draggable-left">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="box">
<ul class="connected-sortable draggable-right">
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</div>
</div>
</body>
</html>
body{
background: #00AAA0;
margin-top: 100px;
font-family: 'Ropa Sans', sans-serif;
}
h1{
color: #fff;
font-weight: normal;
}
.draggable-main{
width: 800px;
margin: 0 auto;
}
.box {
float: left;
width: 45%;
margin-right: 5%;
border: 2px solid #333;
border-radius: 2px;
}
.box:last-child{
margin: 0px;
}
.connected-sortable {
list-style: none;
padding: 20px;
margin: 0px;
}
ul li{
width: inherit;
padding: 15px 20px;
background-color: #fff;
border-bottom: 1px solid #c1c1c1;
color: #000;
font-size: 20px;
margin-bottom: 4px;
border-radius: 5px;
-webkit-transition: transform 0.25s ease-in-out;
-moz-transition: transform 0.25s ease-in-out;
-o-transition: transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
-webkit-transition: box-shadow 0.25s ease-in-out;
-moz-transition: box-shadow 0.25s ease-in-out;
-o-transition: box-shadow 0.25s ease-in-out;
transition: box-shadow 0.25s ease-in-out;
}
ul li:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
ul li.ui-sortable-helper {
background-color: #e5e5e5;
-webkit-box-shadow: 0 0 8px rgba(53, 41, 41, 0.8);
-moz-box-shadow: 0 0 8px rgba(53, 41, 41, 0.8);
box-shadow: 0 0 8px rgba(53, 41, 41, 0.8);
transform: scale(1.015);
z-index: 100;
}
ul li.ui-sortable-placeholder {
background-color: #ddd;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
$(".draggable-left, .draggable-right").sortable({
connectWith: ".connected-sortable",
stack: ".connected-sortable ul"
}).disableSelection();
