XYMer's Home away from Home

When http://bbs.xlr8yourmac.com is down (i.e. always)
It is currently Sun Nov 19, 2017 11:23 pm

All times are UTC - 8 hours




Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: Wed Mar 08, 2017 12:04 pm 
Offline
Master

Joined: Sun Apr 20, 2008 5:24 am
Posts: 9693
Location: North of the State of Jefferson
This is sort of a note to myself, so if you're not doing front-end web development using the jQueryUI sortable feature, this is completely irrelevant to you and I encourage you to stop reading now.

Otherwise, if you have an element that abruptly jumps when you start dragging (usually either the first element or last element), or if you can't drag an item to the top or bottom of the sortable, and you're using containment and a placeholder, you may be able to solve the problem by increasing the size of the sortable's containment object. For example, if you have a table inside a div, and that div is not much larger than the table, and you're using the div as the containment for sortable dragging, and you have the previously mentioned problems, then you may need to change the size of the containment so you can drag slightly outside of it. This seems to to make room for the dragged element and allows sortable to recognize that it's at the top or bottom of the list more reliably.

Oh, and it doesn't work reliably if the thing you're calling sortable on is a table (although it does work for some tables with few clues as to why it doesn't work for others). Use a ul instead, if at all possible.

For example:
jQuery("#mysorthing").sortable({
axis: 'y', // Only allow vertical dragging: haven't tried with 'x' but can't see why it wouldn't work
items: '> :not(.placeholder)',
containment: document.getElementById("mycontainer"),
// Use custom start function to make the magic happen
start: function(e, ui){
ui.placeholder.height(ui.item.height());
var sort = jQuery(this).sortable('instance');
// Make space to drop the dragged element and prevent the element from jumping:
// adjust sortable containment without modifying the containment element.

sort.containment[3] += ui.item.height();
sort.containment[1] -= ui.item.height();
ui.placeholder.height(ui.item.height());
}
})

This does, however, mean that you can drag the element above and below the sortable element to the tune of the height of the dragged element, at least provided you use a ul.

Now when I need to figure this out again two years from now I'll find this post and remember. :)

- Anonymous


Top
 Profile  
 
PostPosted: Wed Mar 08, 2017 12:12 pm 
Offline
Benevolent Dictator
User avatar

Joined: Mon Apr 21, 2008 2:03 am
Posts: 14661
Always interesting! :)


Top
 Profile  
 
PostPosted: Wed Mar 08, 2017 12:20 pm 
Offline
User avatar

Joined: Thu May 15, 2008 8:13 pm
Posts: 9562
Location: Caught between the moon and NYC
Anonymous wrote:
Now when I need to figure this out again two years from now I'll find this post and remember. :)
This is why I always email my coworkers (well, coworker now, and until he comes back from medical leave not even coworker) whenever I figure out something annoying.

When some SNMP discovery/polling software on a Linux server was updated it blew up so spectacularly I had to gut it and start over, and the emails I sent when originally setting it up cut the rebuild from weeks of trial & error to a single night.


Top
 Profile  
 
PostPosted: Fri Mar 17, 2017 8:37 pm 
Offline
he who stacks pork
User avatar

Joined: Thu May 15, 2008 8:04 pm
Posts: 4260
Location: Uranus
Looks nice in concept, got a Codepen space to demonstrate it in action?

-he who stacks pork

_________________
Macintosh Powerbook 180, System 7.1, 100MB HD, 8MB Ram, external 20MB SCSI HD
2009 Surly 1x1 Anniversary Edition Rat Ride, 2016 9:zero:7 SS fatbike, 2014 Borealis Echo, 2013 SS PRC carbon 29er
I enjoy picnics on the beach and prefer my women crazy


Top
 Profile  
 
PostPosted: Sat Mar 18, 2017 3:11 pm 
Offline
Master

Joined: Sun Apr 20, 2008 5:24 am
Posts: 9693
Location: North of the State of Jefferson
I don't. And in retrospect the biggest value of that code seems to be that it avoids a problem with edge detection not working jQueryUI, preventing the sortable from opening up space under the bottom element, especially when the element being dragged is taller than the bottom element in browsers other than Firefox (I haven't narrowed down that else it doesn't like, but there seem to be other CSS or DOM structure issues that affect the problem).

I did, however, add one more bit of code outside the call the sortable(...) to keep the scroll bars from jumping:
// Hack to fix scroll bar jumping when dragging starts. Can't be handled in the sortable 'start'
// function because at that point the jump will have already occurred.

jQuery(sortlist).mousedown(function(){
jQuery(sortlist).height(jQuery(sortlist).height());
}).mouseup(function(){
jQuery(sortlist).height('auto');
});

- Anonymous


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 8 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group