"Drag and Drop List Items"
Bootstrap 3.2.0 Snippet by Joel190910

<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>

Related: See More


Questions / Comments: