Live Demo - Jquery UI Drag and Drop from One List to Another Listbox

See Free Live Demo example of 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, l...

<!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;
}