I have two listboxes that I have rendered as ul, these listboxes are using sortable to allow user to drag and drop items between two and also to re-arrange (move item up/down) inside the listbox.
I am facing an issue in IE when listbox (ul) has scrollbar and user selects first item and wants to move it down (may be at the end) then as item is being dragged down, list does not scrolls down and there is no way for user to drop the item beyond scroll bar.
I changed the css of listbox to add position:relative, it fixed the issue of allowing user to move item down (beyond scroll bar) by moving the scroll bar as user is dragging item down. But problem with this setting is - when I drag an item from listbox1
to listbox2, dragged item stays inside listbox1 and a horizontal scroll bar comes in the listbox1. Though I am able to drop item to listbox2 but I don't see the item that is being dropped to listbox2.
<style type="text/css">
.ContainerContentNew
{
border: 1px;
border-color: #cccccc;
border-style: double double double double;
background:#ffffff;
padding:10px;
}
.controlContent
{
font-family: Verdana;
font-size: 8pt;
color: Black;
}
.brdrbttm1
{
border-bottom:solid 1px #cccccc;
padding:5px 0 0px 22px!important;
height:30px;
}
.brdrbttm2
{
border-bottom:none!important;
padding:5px 0 0px 10px!important;
height:30px;
}
.bttm
{
padding:5px 0 5px 10px!important;
height:30px;
}
input, select
{
font-family: Verdana;
font-size: 8pt;
color: Black;
}
.left
{
background-position:center ;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-active-left_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 32px;
height: 32px;
cursor: pointer;
margin:15px;
}
.right
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-active-right_03.png")%>');
background-repeat: no-repeat;
display: block;
width: 32px;
height: 32px;
cursor: pointer;
margin:15px;
}
.leftAll
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-active-left_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 45px;
height: 32px;
cursor: pointer;
margin:15px;
}
.rightAll
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-active-right_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 45px;
height: 32px;
cursor: pointer;
margin:15px;
}
.left-disabled
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-inactive-left_03.png") %>') ;
background-repeat: no-repeat;
display: block;
width: 32px;
height: 32px;
cursor: pointer;
margin:15px;
}
.right-disabled
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-inactive-right_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 32px;
height: 32px;
cursor: pointer;
margin:15px;
}
.leftAll-disabled
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-inactive-left_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 45px;
height: 32px;
cursor: pointer;
margin:15px;
}
.rightAll-disabled
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-inactive-right_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 45px;
height: 32px;
cursor: pointer;
margin:15px;
}
.ulAvailable, .ulSelected
{
border: 0px;
height: 300px;
width: 368px;
list-style-type: none;
margin: 0px ;
overflow-y:scroll;
overflow-x:none;
position:relative;
padding:0px 0px 0px 0px;
}
.commonItem, .dragElement
{
vertical-align: middle;
padding: 3px 0px 3px 22px;
margin: 0px;
cursor: pointer;
width: 100%;
min-width: 275px;
max-width: 327px;
color:#4D4E53 ;
font-size:12px;
position:relative;
}
.itemHighlight
{
vertical-align: middle;
padding: 0px 7px 0px 5px;
border-top : thin dashed #000000;
border-bottom:none;
margin: 1px;
cursor: pointer;
width: 100%;
min-width: 255px;
max-width: 320px;
position:relative;
}
.commonItemSelected
{
background-color: #FFFFC1;
vertical-align: middle;
color: black;
list-style-type: none;
}
.dragElementSelected
{
background-color: #FFFFC1;
vertical-align: middle;
padding: 5px 5px 5px 5px;
margin: 2px;
color: black;
min-width: 275px;
max-width: 322px;
list-style-type: none;
}
.moveUp
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/up-active_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 32px;
height: 32px;
cursor: pointer;
margin:15px;
}
.moveDown
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/down-active_03.png") %>');
background-repeat: no-repeat;
display: block;
width: 32px;
height: 32px;
cursor: pointer;
margin:15px;
}
.moveUp-disabled
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/up-inactive_03.png") %>');
background-repeat: no-repeat;
margin:15px;
}
.moveDown-disabled
{
background-position: center;
background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/down-inactive_03.png") %>');
background-repeat: no-repeat;
margin:15px;
}
.sorter
{
margin-top: -2px;
}
.ContainerTopRow1
{
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-right:solid 1px #cccccc;
border-bottom:none !important;
Padding-left:10px;
margin:5px 5px 5px 7px!important;
height:30px;
height:35px!important;
background-position:bottom;
background-repeat:repeat-x;
color: #4D4E53;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
.ErrorMessage {FONT-SIZE:11px;FONT-FAMILY:verdana;COLOR:red;display:inline; width:200px; padding: 3px 0px 3px 22px; }
</style>
<table cellspacing="0" cellpadding="0" border="0" width="750px">
<tr>
<td class='ContainerContentNew' style="vertical-align: top; width: 30%; padding: 0; border-right:0px;">
<table cellpadding="0" cellspacing="0" >
<tr class="trListBox1Header">
<td colspan='3' class="ContainerTopRow1" style="
background-image: url('<%=GetImagePath("/cdw/shop/assets/redesign/table-hdr-bg_07.jpg")%>');
height: 30px; border-right: 0!important; border-left: 0!important; border-top: 0!important;
vertical-align: middle; width: 100%;"><%=Listbox1Header %></td>
</tr>
<tr>
<td colspan="3" class="bodytext3" style="vertical-align: top; width: 100%;">
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<tr class="trListBox1DataHeader" style="background: #ffffff; height: 30px;">
<td class='brdrbttm1 btb3' width="100%" align="left" style="padding-left:20px;">
<%=Listbox1DataHeader %>
</td>
</tr>
<tr >
<td style="border: 0px;">
<div class="divListbox1" style="background: #ffffff; height: 337px; overflow:inherit; padding-left: 0px; padding-top:0px; padding-bottom: 0px;">
<asp:ListBox ID="lbxAvailable" runat="server" Width="370px" CssClass="lbxAvailable"
Style="display: none"></asp:ListBox>
<ul id="ulAvailable" class="ulAvailable sortable" style="width:368px"> </ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class='ContainerContentNew' style="vertical-align: middle; width: 120px;border-right:0px;border-top:0px; border-bottom:0px;"
align="center">
<span class='rightAll'></span><span class='right'></span><span class='left'></span>
<span class='leftAll'></span>
</td>
<td class='ContainerContentNew' style="vertical-align: top; width: 30%; padding: 0; border-right:0px;" >
<table cellpadding="0" cellspacing="0" >
<tr class="trListBox2Header">
<td colspan='3' class="ContainerTopRow1" style="
background-image: url('<%=GetImagePath("/cdw/shop/assets/redesign/table-hdr-bg_07.jpg")%>');
height: 30px; border-right: 0!important; border-left: 0!important; border-top: 0!important;
vertical-align: middle; width: 100%;"><%=Listbox2Header %></td>
</tr>
<tr>
<td colspan="3" class="bodytext3" style="vertical-align: top; width: 100%;">
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<tr class="trListBox2DataHeader" style="background: #ffffff; height: 30px;">
<td class='brdrbttm1 btb3' width="100%" align="left" >
<%=Listbox2DataHeader %>
</td>
</tr>
<tr>
<td style="border: 0px ;">
<div class = "divListbox2" style="background: #ffffff; height: 337px; overflow:inherit; padding-left: 0px; padding-top:0px; padding-bottom: 0px;">
<table width="80%" id="ErrorMessageTable">
<tr>
<td class="ErrorMessage">
<asp:Label ID="SelectedColumnsMessageLabel" runat="server" />
</td>
</tr>
</table>
<asp:ListBox ID="lbxSelected" runat="server" Width="370px" CssClass="lbxSelected"
Style="display: none"></asp:ListBox>
<ul id="ulSelected" class="ulSelected sortable" style="width:368px"> </ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class='ContainerContentNew' style="vertical-align: middle; width: 80px; border-right:0px;border-top:0px; border-bottom:0px; "
align="center">
<div class="sorter">
<span class="moveUp"></span><span class="moveDown"></span>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
TransfromListBoxes();
SetTriggers();
SetDragnDrop();
AdjustSorterAndMoverDisplay();
AdjustListboxHeaders();
})
$("li", "#ulSelected").live("dblclick", function() {
$(this).appendTo("#ulAvailable"); AdjustSorterAndMoverDisplay();
});
$("li", "#ulAvailable").live("dblclick", function() {
$(this).appendTo("#ulSelected"); AdjustSorterAndMoverDisplay();
});
// this function is used to bind events on client side clicks
function SetTriggers() {
$(document).on('click', '.commonItem', ToggleItemSelection);
$(document).on('click', '.right:not(".right-disabled")', MoveSelectedItemToRight);
$(document).on('click', '.left:not(".left-disabled")', MoveSelectedItemToLeft);
$(document).on('click', '.rightAll:not(".rightAll-disabled")', MoveAllItemsToRight);
$(document).on('click', '.leftAll:not(".leftAll-disabled")', MoveAllItemsToLeft);
$(document).on('click', '.moveUp', MoveItemUp);
$(document).on('click', '.moveDown', MoveItemDown);
$(document).keydown(SelectAll);
}
// this method is used to transform the current listboxes in ul / li elements as to support drag and drop.
function TransfromListBoxes() {
$('.lbxAvailable, .lbxSelected').hide();
$('.lbxAvailable option').each(function () {
$('.ulAvailable').append(
'<li class="availableItem commonItem">' +
$(this).text() +
'<input type="hidden" class="hfOptionId" value="' + $(this).val() + '"></input>' +
'</li>')
})
$('.lbxSelected option').each(function () {
$('.ulSelected').append(
'<li class="selectedItem commonItem">' +
$(this).text() +
'<input type="hidden" class="hfOptionId" value="' + $(this).val() + '"></input>' +
'</li>')
})
// make the ul same width as listbox
$('.ulAvailable').css('width', $('.lbxAvailable').css('width'));
$('.ulSelected').css('width', $('.lbxSelected').css('width'));
$('.ulAvailable').css('height', '337px');
$('.ulSelected').css('height', '337px');
}
// this is used to toggle the item selected / deselected and change its color.
function ToggleItemSelection(e) {
//if clicked item is already selected
if ($(this).hasClass('commonItemSelected')) {
if (!e.ctrlKey) { // used for multi-selection
$(this).parent().find('.commonItem').removeClass('commonItemSelected');
}
else {
$(this).removeClass('commonItemSelected');
}
}
else {
//If clicked item is not selected and cntrl key is not pressed then
// un-select rest of the items in that listbox
if (!e.ctrlKey) {
$(this).parent().find('.commonItem').removeClass('commonItemSelected');
}
$(this).addClass('commonItemSelected'); //Make the item selected
$("ul:not('#" + $(this).closest('ul').attr('id') + "')").find('li').removeClass('commonItemSelected'); // unselect selected items of the other listbox, this is to make sure that at one time only items of one listbox are selected
}
AdjustSorterAndMoverDisplay();
}
// move selected right button
function MoveSelectedItemToRight() {
$('#ulAvailable .commonItemSelected:visible').appendTo($('.ulSelected'));
AdjustSorterAndMoverDisplay();
}
// move selected left button
function MoveSelectedItemToLeft() {
$('#ulSelected .commonItemSelected:visible').appendTo($('.ulAvailable'));
AdjustSorterAndMoverDisplay();
}
// move all items to right
function MoveAllItemsToRight() {
$('#ulAvailable li:visible').appendTo($('.ulSelected'));
AdjustSorterAndMoverDisplay();
}
// move all items to left
function MoveAllItemsToLeft() {
$('#ulSelected li:visible').appendTo($('.ulAvailable'));
AdjustSorterAndMoverDisplay();
}
var dragged = false;
var dropped = false;
var sorted = false;
// this method is used to set the drag and drop
function SetDragnDrop() {
// make listbox2 sortable, inside "start", "stop" logic is to support multiple items at once.
$("#ulSelected").sortable({
placeholder: "itemHighlight",
connectWith: "#ulAvailable",
cancel: "li:not(.commonItemSelected)",
start: function(e, info) {
sorted = true;
if (dragged == false)
info.item.siblings(".commonItemSelected").hide().clone().show().appendTo(info.item);
},
beforeStop: function(event, ui) {
ui.helper.removeClass("commonItemSelected");
ui.helper.die();
},
stop: function(e, info) {
dropped = true;
if (sorted == true) {
info.item.after(info.item.find("li"));
info.item.siblings(".commonItemSelected:hidden").remove();
info.item.siblings(".commonItemSelected").removeClass("commonItemSelected");
sorted = false;
}
AdjustSorterAndMoverDisplay();
}
});
$("#ulAvailable").sortable({
placeholder: "itemHighlight",
connectWith: "#ulSelected",
cancel: "li:not(.commonItemSelected)",
start: function(e, info) {
sorted = true;
if (dragged == false)
info.item.siblings(".commonItemSelected").hide().clone().show().appendTo(info.item);
},
beforeStop: function(event, ui) {
ui.helper.removeClass("commonItemSelected");
ui.helper.die();
},
stop: function(e, info) {
dropped = true;
if (sorted == true) {
info.item.after(info.item.find("li"));
info.item.siblings(".commonItemSelected:hidden").remove();
info.item.siblings(".commonItemSelected").removeClass("commonItemSelected");
sorted = false;
}
AdjustSorterAndMoverDisplay();
}
});
// to disable text selection while dragging.
$("ul, li a").disableSelection();
}
// this is used to manage the enabling / disabling of move right / left / up / down buttons
// based on the avaibility and selection of items.
function AdjustSorterAndMoverDisplay() {
// move up / down enable / disable
$('.moveUp').removeClass('moveUp-disabled');
$('.moveDown').removeClass('moveDown-disabled');
if ($('#ulSelected li.commonItemSelected').length == 1) {
if ($('#ulSelected li.commonItemSelected').prev().length == 0) {
$('.moveUp').addClass('moveUp-disabled');
}
if ($('#ulSelected li.commonItemSelected').next().length == 0) {
$('.moveDown').addClass('moveDown-disabled');
}
}
else {
$('.moveUp').addClass('moveUp-disabled');
$('.moveDown').addClass('moveDown-disabled');
}
// move right / left enable / disable
$('.left').removeClass('left-disabled');
$('.right').removeClass('right-disabled');
$('.leftAll').removeClass('leftAll-disabled');
$('.rightAll').removeClass('rightAll-disabled');
if ($('#ulSelected li.commonItemSelected:visible').length == 0) {
$('.left').addClass('left-disabled');
}
if ($('#ulAvailable li.commonItemSelected:visible').length == 0) {
$('.right').addClass('right-disabled');
}
if ($('#ulAvailable li:visible').length == 0) {
$('.rightAll').addClass('rightAll-disabled');
}
if ($('#ulSelected li:visible').length == 0) {
$('.leftAll').addClass('leftAll-disabled');
}
//If selected columns listbox has no item in it then
//show error message and disable RunReport and SaveReport buttons
var showErrorMessage = '<%=ShowNoFieldSelectedErrorMessage %>';
if ($('#ulSelected li:visible').length == 0) {
if (showErrorMessage == 'True') {
$("span[id*='SelectedColumnsMessageLabel']").html('<%= SelectedColumnsErrorMessage %>');
$("span[id*='SelectedColumnsMessageLabel'] table").width('230px');
}
$('#ulSelected').css('overflow-y', 'hidden');
$('#ulSelected').width($('#ulAvailable').width() - 17);
$('.divListbox2').css('overflow-y', 'scroll');
$('.divListbox2').css('overflow-x', 'hidden');
$('#ulSelected').height($('.divListbox2').height() - 50);
$('#ErrorMessageTable').show();
if (window.DisablePageButtons)
DisablePageButtons(); //Method at page level
}
else {
$("span[id*='SelectedColumnsMessageLabel']").html("");
$('#ulSelected').css('overflow-y', 'scroll');
$('#ulSelected').height($('.divListbox2').height());
$('#ulSelected').width($('#ulAvailable').width());
$('.divListbox2').css('overflow-y', 'hidden');
$('#ErrorMessageTable').hide();
if (window.EnablePageButtons)
EnablePageButtons(); //Method at page level
}
}
// event for move up. checks for one selected item
function MoveItemUp() {
var item = $('#ulSelected li.commonItemSelected');
if ($(item).length == 1 && item.prev().length > 0) {
$(item).insertBefore($(item).prev()).hide().fadeIn('fast');
}
AdjustSorterAndMoverDisplay();
return false;
}
// event for move down. checks for one selected item.
function MoveItemDown() {
var item = $('#ulSelected li.commonItemSelected');
if ($(item).length == 1 && item.next().length > 0) {
$(item).insertAfter($(item).next()).hide().fadeIn('fast');
}
AdjustSorterAndMoverDisplay();
return false;
}
// use ctrl + A to select all items in the selected ul
function SelectAll(e, ui) {
if (e.ctrlKey && (e.keyCode == 97 || e.keyCode == 65)) {
$('li.commonItemSelected').siblings(':visible').removeClass('commonItemSelected').addClass('commonItemSelected');
$("ul, li a").disableSelection();
return false;
}
}
// this is used to create the json output and to save it in hidden fields for server side use. this method is binded server side, to run when page is posted back
function CreateOutput() {
var SelectedItems = [];
var jsonStringSelected1='';
$('#ulSelected li:visible').each(function() {
var item = {
Text: $(this).text(),
Value: $(this).find('.hfOptionId').val()
};
SelectedItems.push(item);
})
var jsonStringSelected = JSON.stringify(SelectedItems);
$('.selectedValues').val(jsonStringSelected);
var AvailableItems = [];
$('#ulAvailable li:visible').each(function () {
var item = {
Text: $(this).text(),
Value: $(this).find('.hfOptionId').val()
};
AvailableItems.push(item);
})
var jsonStringAvailable = JSON.stringify(AvailableItems);
$('.availableValues').val(jsonStringAvailable);
}
function AdjustListboxHeaders() {
var header1 = '<%=this.Listbox1Header%>';
if (header1 == '') {
var divHeight = $('.divListbox1').height() + $('tr.trListBox1Header').height();
var ulHeight = $('#ulAvailable').height() + $('tr.trListBox1Header').height();
$('tr.trListBox1Header').hide();
$('.divListbox1').height(divHeight)
$('#ulAvailable').height(ulHeight)
}
var dataHeader1 = '<%=this.Listbox1DataHeader%>';
if (dataHeader1 == '') {
var divHeight = $('.divListbox1').height() + $('tr.trListBox1DataHeader').height();
var ulHeight = $('#ulAvailable').height() + $('tr.trListBox1DataHeader').height();
$('tr.trListBox1DataHeader').hide();
$('.divListbox1').height(divHeight)
$('#ulAvailable').height(ulHeight)
}
var header2 = '<%=this.Listbox2Header%>';
if (header2 == '') {
var divHeight = $('.divListbox2').height() + $('tr.trListBox2Header').height();
var ulHeight = $('#ulSelected').height() + $('tr.trListBox2Header').height();
$('tr.trListBox2Header').hide();
$('.divListbox2').height(divHeight)
$('#ulSelected').height(ulHeight)
}
var dataHeader2 = '<%=this.Listbox2DataHeader%>';
if (dataHeader2 == '') {
var divHeight = $('.divListbox2').height() + $('tr.trListBox2DataHeader').height();
var ulHeight = $('#ulSelected').height() + $('tr.trListBox2DataHeader').height();
$('tr.trListBox2DataHeader').hide();
$('.divListbox2').height(divHeight)
$('#ulSelected').height(ulHeight)
}
}
</script>
Please see snippet of my control definition. I would appreciate any help in this.
Thanks Anup for the link. I checked examples in the link but not sure if I need to update anything in Sortable function or update css for it to get it scroll when dropping an item in the listbox.
Sammy71
Member
18 Points
19 Posts
Jquery - Sortable to move items from one listbox with scroll to other
Nov 19, 2012 09:02 PM|LINK
I have two listboxes that I have rendered as ul, these listboxes are using sortable to allow user to drag and drop items between two and also to re-arrange (move item up/down) inside the listbox.
I am facing an issue in IE when listbox (ul) has scrollbar and user selects first item and wants to move it down (may be at the end) then as item is being dragged down, list does not scrolls down and there is no way for user to drop the item beyond scroll bar.
I changed the css of listbox to add position:relative, it fixed the issue of allowing user to move item down (beyond scroll bar) by moving the scroll bar as user is dragging item down. But problem with this setting is - when I drag an item from listbox1 to listbox2, dragged item stays inside listbox1 and a horizontal scroll bar comes in the listbox1. Though I am able to drop item to listbox2 but I don't see the item that is being dropped to listbox2.
<style type="text/css"> .ContainerContentNew { border: 1px; border-color: #cccccc; border-style: double double double double; background:#ffffff; padding:10px; } .controlContent { font-family: Verdana; font-size: 8pt; color: Black; } .brdrbttm1 { border-bottom:solid 1px #cccccc; padding:5px 0 0px 22px!important; height:30px; } .brdrbttm2 { border-bottom:none!important; padding:5px 0 0px 10px!important; height:30px; } .bttm { padding:5px 0 5px 10px!important; height:30px; } input, select { font-family: Verdana; font-size: 8pt; color: Black; } .left { background-position:center ; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-active-left_03.png") %>'); background-repeat: no-repeat; display: block; width: 32px; height: 32px; cursor: pointer; margin:15px; } .right { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-active-right_03.png")%>'); background-repeat: no-repeat; display: block; width: 32px; height: 32px; cursor: pointer; margin:15px; } .leftAll { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-active-left_03.png") %>'); background-repeat: no-repeat; display: block; width: 45px; height: 32px; cursor: pointer; margin:15px; } .rightAll { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-active-right_03.png") %>'); background-repeat: no-repeat; display: block; width: 45px; height: 32px; cursor: pointer; margin:15px; } .left-disabled { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-inactive-left_03.png") %>') ; background-repeat: no-repeat; display: block; width: 32px; height: 32px; cursor: pointer; margin:15px; } .right-disabled { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/single-arrow-inactive-right_03.png") %>'); background-repeat: no-repeat; display: block; width: 32px; height: 32px; cursor: pointer; margin:15px; } .leftAll-disabled { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-inactive-left_03.png") %>'); background-repeat: no-repeat; display: block; width: 45px; height: 32px; cursor: pointer; margin:15px; } .rightAll-disabled { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/double-arrow-inactive-right_03.png") %>'); background-repeat: no-repeat; display: block; width: 45px; height: 32px; cursor: pointer; margin:15px; } .ulAvailable, .ulSelected { border: 0px; height: 300px; width: 368px; list-style-type: none; margin: 0px ; overflow-y:scroll; overflow-x:none; position:relative; padding:0px 0px 0px 0px; } .commonItem, .dragElement { vertical-align: middle; padding: 3px 0px 3px 22px; margin: 0px; cursor: pointer; width: 100%; min-width: 275px; max-width: 327px; color:#4D4E53 ; font-size:12px; position:relative; } .itemHighlight { vertical-align: middle; padding: 0px 7px 0px 5px; border-top : thin dashed #000000; border-bottom:none; margin: 1px; cursor: pointer; width: 100%; min-width: 255px; max-width: 320px; position:relative; } .commonItemSelected { background-color: #FFFFC1; vertical-align: middle; color: black; list-style-type: none; } .dragElementSelected { background-color: #FFFFC1; vertical-align: middle; padding: 5px 5px 5px 5px; margin: 2px; color: black; min-width: 275px; max-width: 322px; list-style-type: none; } .moveUp { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/up-active_03.png") %>'); background-repeat: no-repeat; display: block; width: 32px; height: 32px; cursor: pointer; margin:15px; } .moveDown { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/down-active_03.png") %>'); background-repeat: no-repeat; display: block; width: 32px; height: 32px; cursor: pointer; margin:15px; } .moveUp-disabled { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/up-inactive_03.png") %>'); background-repeat: no-repeat; margin:15px; } .moveDown-disabled { background-position: center; background-image: url('<%=GetImagePath("/cdw/shop/purchasehistory/down-inactive_03.png") %>'); background-repeat: no-repeat; margin:15px; } .sorter { margin-top: -2px; } .ContainerTopRow1 { border-top:solid 1px #cccccc; border-left:solid 1px #cccccc; border-right:solid 1px #cccccc; border-bottom:none !important; Padding-left:10px; margin:5px 5px 5px 7px!important; height:30px; height:35px!important; background-position:bottom; background-repeat:repeat-x; color: #4D4E53; font-family: Verdana; font-size: 13px; font-weight: bold; } .ErrorMessage {FONT-SIZE:11px;FONT-FAMILY:verdana;COLOR:red;display:inline; width:200px; padding: 3px 0px 3px 22px; } </style> <table cellspacing="0" cellpadding="0" border="0" width="750px"> <tr> <td class='ContainerContentNew' style="vertical-align: top; width: 30%; padding: 0; border-right:0px;"> <table cellpadding="0" cellspacing="0" > <tr class="trListBox1Header"> <td colspan='3' class="ContainerTopRow1" style=" background-image: url('<%=GetImagePath("/cdw/shop/assets/redesign/table-hdr-bg_07.jpg")%>'); height: 30px; border-right: 0!important; border-left: 0!important; border-top: 0!important; vertical-align: middle; width: 100%;"><%=Listbox1Header %></td> </tr> <tr> <td colspan="3" class="bodytext3" style="vertical-align: top; width: 100%;"> <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;"> <tr class="trListBox1DataHeader" style="background: #ffffff; height: 30px;"> <td class='brdrbttm1 btb3' width="100%" align="left" style="padding-left:20px;"> <%=Listbox1DataHeader %> </td> </tr> <tr > <td style="border: 0px;"> <div class="divListbox1" style="background: #ffffff; height: 337px; overflow:inherit; padding-left: 0px; padding-top:0px; padding-bottom: 0px;"> <asp:ListBox ID="lbxAvailable" runat="server" Width="370px" CssClass="lbxAvailable" Style="display: none"></asp:ListBox> <ul id="ulAvailable" class="ulAvailable sortable" style="width:368px"> </ul> </div> </td> </tr> </table> </td> </tr> </table> </td> <td class='ContainerContentNew' style="vertical-align: middle; width: 120px;border-right:0px;border-top:0px; border-bottom:0px;" align="center"> <span class='rightAll'></span><span class='right'></span><span class='left'></span> <span class='leftAll'></span> </td> <td class='ContainerContentNew' style="vertical-align: top; width: 30%; padding: 0; border-right:0px;" > <table cellpadding="0" cellspacing="0" > <tr class="trListBox2Header"> <td colspan='3' class="ContainerTopRow1" style=" background-image: url('<%=GetImagePath("/cdw/shop/assets/redesign/table-hdr-bg_07.jpg")%>'); height: 30px; border-right: 0!important; border-left: 0!important; border-top: 0!important; vertical-align: middle; width: 100%;"><%=Listbox2Header %></td> </tr> <tr> <td colspan="3" class="bodytext3" style="vertical-align: top; width: 100%;"> <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;"> <tr class="trListBox2DataHeader" style="background: #ffffff; height: 30px;"> <td class='brdrbttm1 btb3' width="100%" align="left" > <%=Listbox2DataHeader %> </td> </tr> <tr> <td style="border: 0px ;"> <div class = "divListbox2" style="background: #ffffff; height: 337px; overflow:inherit; padding-left: 0px; padding-top:0px; padding-bottom: 0px;"> <table width="80%" id="ErrorMessageTable"> <tr> <td class="ErrorMessage"> <asp:Label ID="SelectedColumnsMessageLabel" runat="server" /> </td> </tr> </table> <asp:ListBox ID="lbxSelected" runat="server" Width="370px" CssClass="lbxSelected" Style="display: none"></asp:ListBox> <ul id="ulSelected" class="ulSelected sortable" style="width:368px"> </ul> </div> </td> </tr> </table> </td> </tr> </table> </td> <td class='ContainerContentNew' style="vertical-align: middle; width: 80px; border-right:0px;border-top:0px; border-bottom:0px; " align="center"> <div class="sorter"> <span class="moveUp"></span><span class="moveDown"></span> </div> </td> </tr> </table> <script type="text/javascript"> $(document).ready(function() { TransfromListBoxes(); SetTriggers(); SetDragnDrop(); AdjustSorterAndMoverDisplay(); AdjustListboxHeaders(); }) $("li", "#ulSelected").live("dblclick", function() { $(this).appendTo("#ulAvailable"); AdjustSorterAndMoverDisplay(); }); $("li", "#ulAvailable").live("dblclick", function() { $(this).appendTo("#ulSelected"); AdjustSorterAndMoverDisplay(); }); // this function is used to bind events on client side clicks function SetTriggers() { $(document).on('click', '.commonItem', ToggleItemSelection); $(document).on('click', '.right:not(".right-disabled")', MoveSelectedItemToRight); $(document).on('click', '.left:not(".left-disabled")', MoveSelectedItemToLeft); $(document).on('click', '.rightAll:not(".rightAll-disabled")', MoveAllItemsToRight); $(document).on('click', '.leftAll:not(".leftAll-disabled")', MoveAllItemsToLeft); $(document).on('click', '.moveUp', MoveItemUp); $(document).on('click', '.moveDown', MoveItemDown); $(document).keydown(SelectAll); } // this method is used to transform the current listboxes in ul / li elements as to support drag and drop. function TransfromListBoxes() { $('.lbxAvailable, .lbxSelected').hide(); $('.lbxAvailable option').each(function () { $('.ulAvailable').append( '<li class="availableItem commonItem">' + $(this).text() + '<input type="hidden" class="hfOptionId" value="' + $(this).val() + '"></input>' + '</li>') }) $('.lbxSelected option').each(function () { $('.ulSelected').append( '<li class="selectedItem commonItem">' + $(this).text() + '<input type="hidden" class="hfOptionId" value="' + $(this).val() + '"></input>' + '</li>') }) // make the ul same width as listbox $('.ulAvailable').css('width', $('.lbxAvailable').css('width')); $('.ulSelected').css('width', $('.lbxSelected').css('width')); $('.ulAvailable').css('height', '337px'); $('.ulSelected').css('height', '337px'); } // this is used to toggle the item selected / deselected and change its color. function ToggleItemSelection(e) { //if clicked item is already selected if ($(this).hasClass('commonItemSelected')) { if (!e.ctrlKey) { // used for multi-selection $(this).parent().find('.commonItem').removeClass('commonItemSelected'); } else { $(this).removeClass('commonItemSelected'); } } else { //If clicked item is not selected and cntrl key is not pressed then // un-select rest of the items in that listbox if (!e.ctrlKey) { $(this).parent().find('.commonItem').removeClass('commonItemSelected'); } $(this).addClass('commonItemSelected'); //Make the item selected $("ul:not('#" + $(this).closest('ul').attr('id') + "')").find('li').removeClass('commonItemSelected'); // unselect selected items of the other listbox, this is to make sure that at one time only items of one listbox are selected } AdjustSorterAndMoverDisplay(); } // move selected right button function MoveSelectedItemToRight() { $('#ulAvailable .commonItemSelected:visible').appendTo($('.ulSelected')); AdjustSorterAndMoverDisplay(); } // move selected left button function MoveSelectedItemToLeft() { $('#ulSelected .commonItemSelected:visible').appendTo($('.ulAvailable')); AdjustSorterAndMoverDisplay(); } // move all items to right function MoveAllItemsToRight() { $('#ulAvailable li:visible').appendTo($('.ulSelected')); AdjustSorterAndMoverDisplay(); } // move all items to left function MoveAllItemsToLeft() { $('#ulSelected li:visible').appendTo($('.ulAvailable')); AdjustSorterAndMoverDisplay(); } var dragged = false; var dropped = false; var sorted = false; // this method is used to set the drag and drop function SetDragnDrop() { // make listbox2 sortable, inside "start", "stop" logic is to support multiple items at once. $("#ulSelected").sortable({ placeholder: "itemHighlight", connectWith: "#ulAvailable", cancel: "li:not(.commonItemSelected)", start: function(e, info) { sorted = true; if (dragged == false) info.item.siblings(".commonItemSelected").hide().clone().show().appendTo(info.item); }, beforeStop: function(event, ui) { ui.helper.removeClass("commonItemSelected"); ui.helper.die(); }, stop: function(e, info) { dropped = true; if (sorted == true) { info.item.after(info.item.find("li")); info.item.siblings(".commonItemSelected:hidden").remove(); info.item.siblings(".commonItemSelected").removeClass("commonItemSelected"); sorted = false; } AdjustSorterAndMoverDisplay(); } }); $("#ulAvailable").sortable({ placeholder: "itemHighlight", connectWith: "#ulSelected", cancel: "li:not(.commonItemSelected)", start: function(e, info) { sorted = true; if (dragged == false) info.item.siblings(".commonItemSelected").hide().clone().show().appendTo(info.item); }, beforeStop: function(event, ui) { ui.helper.removeClass("commonItemSelected"); ui.helper.die(); }, stop: function(e, info) { dropped = true; if (sorted == true) { info.item.after(info.item.find("li")); info.item.siblings(".commonItemSelected:hidden").remove(); info.item.siblings(".commonItemSelected").removeClass("commonItemSelected"); sorted = false; } AdjustSorterAndMoverDisplay(); } }); // to disable text selection while dragging. $("ul, li a").disableSelection(); } // this is used to manage the enabling / disabling of move right / left / up / down buttons // based on the avaibility and selection of items. function AdjustSorterAndMoverDisplay() { // move up / down enable / disable $('.moveUp').removeClass('moveUp-disabled'); $('.moveDown').removeClass('moveDown-disabled'); if ($('#ulSelected li.commonItemSelected').length == 1) { if ($('#ulSelected li.commonItemSelected').prev().length == 0) { $('.moveUp').addClass('moveUp-disabled'); } if ($('#ulSelected li.commonItemSelected').next().length == 0) { $('.moveDown').addClass('moveDown-disabled'); } } else { $('.moveUp').addClass('moveUp-disabled'); $('.moveDown').addClass('moveDown-disabled'); } // move right / left enable / disable $('.left').removeClass('left-disabled'); $('.right').removeClass('right-disabled'); $('.leftAll').removeClass('leftAll-disabled'); $('.rightAll').removeClass('rightAll-disabled'); if ($('#ulSelected li.commonItemSelected:visible').length == 0) { $('.left').addClass('left-disabled'); } if ($('#ulAvailable li.commonItemSelected:visible').length == 0) { $('.right').addClass('right-disabled'); } if ($('#ulAvailable li:visible').length == 0) { $('.rightAll').addClass('rightAll-disabled'); } if ($('#ulSelected li:visible').length == 0) { $('.leftAll').addClass('leftAll-disabled'); } //If selected columns listbox has no item in it then //show error message and disable RunReport and SaveReport buttons var showErrorMessage = '<%=ShowNoFieldSelectedErrorMessage %>'; if ($('#ulSelected li:visible').length == 0) { if (showErrorMessage == 'True') { $("span[id*='SelectedColumnsMessageLabel']").html('<%= SelectedColumnsErrorMessage %>'); $("span[id*='SelectedColumnsMessageLabel'] table").width('230px'); } $('#ulSelected').css('overflow-y', 'hidden'); $('#ulSelected').width($('#ulAvailable').width() - 17); $('.divListbox2').css('overflow-y', 'scroll'); $('.divListbox2').css('overflow-x', 'hidden'); $('#ulSelected').height($('.divListbox2').height() - 50); $('#ErrorMessageTable').show(); if (window.DisablePageButtons) DisablePageButtons(); //Method at page level } else { $("span[id*='SelectedColumnsMessageLabel']").html(""); $('#ulSelected').css('overflow-y', 'scroll'); $('#ulSelected').height($('.divListbox2').height()); $('#ulSelected').width($('#ulAvailable').width()); $('.divListbox2').css('overflow-y', 'hidden'); $('#ErrorMessageTable').hide(); if (window.EnablePageButtons) EnablePageButtons(); //Method at page level } } // event for move up. checks for one selected item function MoveItemUp() { var item = $('#ulSelected li.commonItemSelected'); if ($(item).length == 1 && item.prev().length > 0) { $(item).insertBefore($(item).prev()).hide().fadeIn('fast'); } AdjustSorterAndMoverDisplay(); return false; } // event for move down. checks for one selected item. function MoveItemDown() { var item = $('#ulSelected li.commonItemSelected'); if ($(item).length == 1 && item.next().length > 0) { $(item).insertAfter($(item).next()).hide().fadeIn('fast'); } AdjustSorterAndMoverDisplay(); return false; } // use ctrl + A to select all items in the selected ul function SelectAll(e, ui) { if (e.ctrlKey && (e.keyCode == 97 || e.keyCode == 65)) { $('li.commonItemSelected').siblings(':visible').removeClass('commonItemSelected').addClass('commonItemSelected'); $("ul, li a").disableSelection(); return false; } } // this is used to create the json output and to save it in hidden fields for server side use. this method is binded server side, to run when page is posted back function CreateOutput() { var SelectedItems = []; var jsonStringSelected1=''; $('#ulSelected li:visible').each(function() { var item = { Text: $(this).text(), Value: $(this).find('.hfOptionId').val() }; SelectedItems.push(item); }) var jsonStringSelected = JSON.stringify(SelectedItems); $('.selectedValues').val(jsonStringSelected); var AvailableItems = []; $('#ulAvailable li:visible').each(function () { var item = { Text: $(this).text(), Value: $(this).find('.hfOptionId').val() }; AvailableItems.push(item); }) var jsonStringAvailable = JSON.stringify(AvailableItems); $('.availableValues').val(jsonStringAvailable); } function AdjustListboxHeaders() { var header1 = '<%=this.Listbox1Header%>'; if (header1 == '') { var divHeight = $('.divListbox1').height() + $('tr.trListBox1Header').height(); var ulHeight = $('#ulAvailable').height() + $('tr.trListBox1Header').height(); $('tr.trListBox1Header').hide(); $('.divListbox1').height(divHeight) $('#ulAvailable').height(ulHeight) } var dataHeader1 = '<%=this.Listbox1DataHeader%>'; if (dataHeader1 == '') { var divHeight = $('.divListbox1').height() + $('tr.trListBox1DataHeader').height(); var ulHeight = $('#ulAvailable').height() + $('tr.trListBox1DataHeader').height(); $('tr.trListBox1DataHeader').hide(); $('.divListbox1').height(divHeight) $('#ulAvailable').height(ulHeight) } var header2 = '<%=this.Listbox2Header%>'; if (header2 == '') { var divHeight = $('.divListbox2').height() + $('tr.trListBox2Header').height(); var ulHeight = $('#ulSelected').height() + $('tr.trListBox2Header').height(); $('tr.trListBox2Header').hide(); $('.divListbox2').height(divHeight) $('#ulSelected').height(ulHeight) } var dataHeader2 = '<%=this.Listbox2DataHeader%>'; if (dataHeader2 == '') { var divHeight = $('.divListbox2').height() + $('tr.trListBox2DataHeader').height(); var ulHeight = $('#ulSelected').height() + $('tr.trListBox2DataHeader').height(); $('tr.trListBox2DataHeader').hide(); $('.divListbox2').height(divHeight) $('#ulSelected').height(ulHeight) } } </script>Please see snippet of my control definition. I would appreciate any help in this.
Thanks.
asteranup
All-Star
30184 Points
4906 Posts
Re: Jquery - Sortable to move items from one listbox with scroll to other
Nov 20, 2012 02:07 AM|LINK
Hi,
Here are some working examples you may want to check-
http://delicious.com/anupdg/sortable+draggable
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Sammy71
Member
18 Points
19 Posts
Re: Jquery - Sortable to move items from one listbox with scroll to other
Nov 26, 2012 09:45 PM|LINK
Thanks Anup for the link. I checked examples in the link but not sure if I need to update anything in Sortable function or update css for it to get it scroll when dropping an item in the listbox.
Thanks