<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="sideBySide">
<div class="left">
<ul class="source">
<li>Alfa Romeo</li>
<li>Audi</li>
<li>BMW</li>
<li>Ford</li>
<li>Jaguar</li>
<li>Mercedes</li>
<li>Porsche</li>
<li>Tesla</li>
<li>Volkswagen</li>
<li>Volvo</li>
</ul>
</div>
<div class="right">
<ol class="target">
<li class="placeholder">Drop your favourites here</li>
</ol>
</div>
</div>
ul.source, ul.target {
min-height: 50px;
margin: 0px 25px 10px 0px;
padding: 2px;
border-width: 1px;
border-style: solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
list-style-type: none;
list-style-position: inside;
}
ul.source {
border-color: #f8e0b1;
}
ul.target {
border-color: #add38d;
}
.source li, .target li {
margin: 5px;
padding: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.source li {
background-color: #fcf8e3;
border: 1px solid #fbeed5;
color: #c09853;
}
.target li {
background-color: #ebf5e6;
border: 1px solid #d6e9c6;
color: #468847;
}
.sortable-dragging {
border-color: #ccc !important;
background-color: #fafafa !important;
color: #bbb !important;
}
.sortable-placeholder {
height: 40px;
}
.source .sortable-placeholder {
border: 2px dashed #f8e0b1 !important;
background-color: #fefcf5 !important;
}
.target .sortable-placeholder {
border: 2px dashed #add38d !important;
background-color: #f6fbf4 !important;
}
<script type="text/javascript">
$(function () {
$(".source, .target").sortable({
connectWith: ".connected"
});
});
function updateValues() {
var items = [];
$("ul.target").children().each(function() {
var item = {manufacturer: $(this).text()};
items.push(item);
});
var jsonData = JSON.stringify(items);
$.ajax ({
url: "dnd.xsp/setfavourites",
type: "PUT",
data: jsonData,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(){},
error: function(){}
});
};
$(".source li").draggable({
addClasses: false,
appendTo: "body",
helper: "clone"
});
$(".target").droppable({
addClasses: false,
activeClass: "listActive",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$(this).find(".placeholder").remove();
var link = $("<a href='#' class='dismiss'>x</a>");
var list = $("<li></li>").text(ui.draggable.text());
$(list).append(link);
$(list).appendTo(this);
updateValues();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("listActive");
},
update: function() {
updateValues();
}
}).on("click", ".dismiss", function(event) {
event.preventDefault();
$(this).parent().remove();
updateValues();
});
</script>
