<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<br>
<div class="container">
<div class="row">
<div class="dual-list list-right col-md-6">
<div class="well">
<div class="row">
<div class="col-md-12 form-group">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search" style="top: 0px;"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search">
<span class="input-group-addon glyphicon glyphicon-unchecked selector" style="cursor: pointer; top: 0px;" title="Select All"></span>
<span class="input-group-addon glyphicon glyphicon-plus move-left" style="cursor: pointer; top: 0px;" title="Add Selected"></span>
</div>
</div>
</div>
<ul class="list-group" id="dual-list-right">
<li class="list-group-item" data-value="6">Option 6</li>
<li class="list-group-item" data-value="7">Option 7</li>
<li class="list-group-item" data-value="8">Option 8</li>
<li class="list-group-item" data-value="9">Option 9</li>
<li class="list-group-item" data-value="10">Option 10</li>
</ul>
</div>
</div>
<div class="dual-list list-left col-md-6">
<div class="well text-right">
<div class="row">
<div class="col-md-12 form-group">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search" style="top: 0px;"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search">
<span class="input-group-addon glyphicon glyphicon-unchecked selector" style="cursor: pointer; top: 0px;" title="Select All"></span>
<span class="input-group-addon glyphicon glyphicon-minus move-right" style="cursor: pointer; top: 0px;" title="Remove Selected"></span>
</div>
</div>
</div>
<ul class="list-group" id="dual-list-left">
<li class="list-group-item" data-value="1">Option 1</li>
<li class="list-group-item" data-value="2">Option 2</li>
<li class="list-group-item" data-value="3">Option 3</li>
<li class="list-group-item" data-value="4">Option 4</li>
<li class="list-group-item" data-value="5">Option 5</li>
</ul>
</div>
</div>
<select id="dual-list-options" name="dual-list-options[]" multiple="multiple" style="display: none;" size="10">
<option value="1" selected="selected">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4" selected="selected">Option 4</option>
<option value="5" selected="selected">Option 5</option>
</select>
</div>
</div>
.list-left li, .list-right li {
cursor: pointer;
}
/*
.dual-list .list-group {
margin-top: 8px;
}
.list-arrows button {
margin-bottom: 20px;
}
.left-check-col {
padding-left: 0px;
}
*/
$(function () {
var move_right = '<span class="glyphicon glyphicon-minus pull-left dual-list-move-right" title="Remove Selected"></span>';
var move_left = '<span class="glyphicon glyphicon-plus pull-right dual-list-move-left " title="Add Selected"></span>';
$(".dual-list.list-left .list-group").sortable({
stop: function( event, ui ) {
updateSelectedOptions();
}
});
$('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
});
$('body').on('click', '.dual-list-move-right', function (e) {
e.preventDefault();
actives = $(this).parent();
$(this).parent().find("span").remove();
$(move_left).clone().appendTo(actives);
actives.clone().appendTo('.list-right ul').removeClass("active");
actives.remove();
sortUnorderedList("dual-list-right");
updateSelectedOptions();
});
$('body').on('click', '.dual-list-move-left', function (e) {
e.preventDefault();
actives = $(this).parent();
$(this).parent().find("span").remove();
$(move_right).clone().appendTo(actives);
actives.clone().appendTo('.list-left ul').removeClass("active");
actives.remove();
updateSelectedOptions();
});
$('.move-right, .move-left').click(function () {
var $button = $(this), actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.find(".dual-list-move-left").remove();
actives.append($(move_right).clone());
actives.clone().appendTo('.list-left ul').removeClass("active");
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.find(".dual-list-move-right").remove();
actives.append($(move_left).clone());
actives.clone().appendTo('.list-right ul').removeClass("active");
actives.remove();
}
updateSelectedOptions();
});
function updateSelectedOptions() {
$('#dual-list-options').find('option').remove();
$('.list-left ul li').each(function(idx, opt) {
$('#dual-list-options').append($("<option></option>")
.attr("value", $(opt).data("value"))
.text( $(opt).text())
.prop("selected", "selected")
);
});
}
$('.dual-list .selector').click(function () {
var $checkBox = $(this);
if (!$checkBox.hasClass('selected')) {
$checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
$checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
} else {
$checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
$checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
}
});
$('[name="SearchDualList"]').keyup(function (e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
$(".glyphicon-search").on("click", function() {
$(this).next("input").focus();
});
function sortUnorderedList(ul, sortDescending) {
$("#" + ul + " li").sort(sort_li).appendTo("#" + ul);
function sort_li(a, b){
return ($(b).data('value')) < ($(a).data('value')) ? 1 : -1;
}
}
$("#dual-list-left li").append(move_right);
$("#dual-list-right li").append(move_left);
/*
// let the gallery items be draggable
$( ".dual-list.list-left .list-group .list-group-item" ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
$( ".dual-list.list-right .list-group .list-group-item" ).draggable({
//connectToSortable: ".dual-list.list-right .list-group",
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the trash be droppable, accepting the gallery items
$( ".dual-list.list-right .list-group .list-group-item" ).droppable({
accept: ".dual-list.list-left .list-group .list-group-item",
drop: function( event, ui ) {
//deleteImage( ui.draggable );
console.log(this);
console.log(event);
console.log(ui);
moveItem(ui.draggable);
}
});
// let the trash be droppable, accepting the gallery items
$( ".dual-list.list-left .list-group .list-group-item" ).droppable({
accept: ".dual-list.list-right .list-group .list-group-item",
drop: function( event, ui ) {
//deleteImage( ui.draggable );
console.log(this);
console.log(event);
console.log(ui);
moveItem(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
function moveItem(item) {
console.log("move item");
console.log($(item));
var from = $(item).closest(".dual-list").hasClass("list-left") ? "left" : "right"
var to = $(item).closest(".dual-list").hasClass("list-left") ? "right" : "left"
console.log(from, to);
if (to == "left") {
$(item).find("span.dual-list-move-left").remove();
$(item).append($(move_right).clone());
$(item).appendTo('.list-' + to + ' ul');
} else if (to == "right") {
$(item).find("span.dual-list-move-right").remove();
$(item).append($(move_left).clone());
$(item).appendTo('.list-' + to + ' ul');
}
}
*/
});
