Phew! It was fun to fix.
The first problem, when the list scrolls forever horizontally, I fixed some simple overflow changes in your CSS. I removed both overflow attributes from your .drag_column and placed the overflow: hidden in .drag_container.
.drag_container { width: 1000px; margin: 0 auto; position: relative; border: 1px solid black; position: relative; z-index: 1; overflow: hidden; } .drag_column { padding: 5px; width: 490px; height: 200px; float: left; position: relative; }
Unfortunately, when I did this, he created a position error when you dragged your draggable from one list to another (it will shoot up, depending on which element of the list you selected). To fix this, I added the line "helper: clone" to your drag and drop function.
$( "#available > li" ).draggable({ revert: 'invalid', connectToSortable: '#selected', containment: '#drag_container', helper: 'clone' });
Again this created an undesirable effect. The clone helper makes the original list never delete items. To fix this, I had to manually create a function that would delete the old item. What I did was add the start: function to your draggable object, which grabbed the identifier of the object and placed it in a variable. Then I created the droppable object of your # selected list and made the drop: function there. This drop function simply makes the slUUp (100) of the object with a match identifier. Note that I have a variable created when the script runs - this fixes the error in IE.
var dragged = null; $(function() { $( "#available > li" ).draggable({ revert: 'invalid', connectToSortable: '#selected', containment: '#drag_container', helper: 'clone', start: function(ui, event) { dragged = $(this).attr('id'); } }); $( "#selected" ).droppable({ drop: function(event, ui) { var ident = "#" + dragged; $(ident).slideUp(100); } });
I posted the full HTML page at http://pastehtml.com/view/1by9nfd.html so you can play if you want. Hope this helps!
jwegner
source share