Response title
This is preview!
- Screen name: svermani
svermani's Profile
3 Posts
0 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 05-Dec-2012 10:54 AM
- Forum: Using jQuery UI
I am seeing an issue with Sortable in IE9 that list does not scroll as an item is being dragged down. Is it a bug or am I missing something here?
Here is the sample that I am working with -- <style type="text/css">
.sortable
{
border: 1px solid black;
height: 200px;
width: 368px;
list-style-type: none;
margin: 0px ;
overflow-y:scroll;
padding:0px 0px 0px 0px;
font-family: Verdana;
}
</style>
<body>
<ul id="sortable" class="sortable">
<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>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
<script> $("#sortable").sortable();</script>
- 16-Nov-2012 02:55 PM
- Forum: Using jQuery UI
I have two listboxes that I have rendered as ul with sortable to allow user to drag and drop items between two and also it allows them 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. Is it a limitation from JQuery or am I missing something?
Please see attached snippet of my code.
Attachments- CustomListBox1.zip
- Size: 4.42 KB Downloads: 580
- I have two sortables to drag and drop items to each other. I see that when I drag an item from sortable1, placeholder remains visible into sortable1 till the dragged item is completely in the Sortable2. I would like it to show placeholder into sortable2 as soon as dragged item comes over the sortable2. Please advice how can this be achieved.
Please see attaches screen shots to check the current behavior.
This is the code that I have to set the drag and drop -
// 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();
Attachments- Sortable1_Placeholder.jpg
- Size: 85.49 KB Downloads: 505
- «Prev
- Next »
Moderate user : svermani
