Home Community Mys-Script Creative Off-Topic |
|
|
Thread Tools | Display Modes |
#1
|
|||
|
|||
Sorting Columns of Adoptables
So I am working on having several columns of adoptables shown on the myadopts page instead of just one. And have them be sortable. I have successfully installed the sortable mod. It worked fine with the single row of adoptables. But when I implemented the columns the sorting quit working. I have scanned over the code and believe that the problem stems from having a table inside of the sorting table. Though I haven't the slightest how to go about changing what I have to make it work the way I want. I've tried a few things but they only result in one or the other of the two things(columns and sortablitiy) actually working.
With the below code the columns work but the sorting doesn't. Here is the code: PHP Code:
|
#2
|
|||
|
|||
It's possible to do this with a few tweaks in the JavaScript part too and not just the HTML.
Anyway, to start off, first remove the "id" attribute of the sortable table. Thus the outer table will no longer have an id of "sortable_adoptables". Then, add a class to the "td" of the outer table and make it equal to "sortable_adoptables". After that, take out the "id" attribute of the inner table "tr" elements and assign it to the inner table instead. You're done with the HTML part. As for the JavaScript side, it might be a little bit too complex to explain, so here's the ready-to-launch JavaScript and PHP + HTML code. HTML Code:
<script type="text/javascript"> $(document).ready(function(){ $('body').undelegate('click').delegate('p#activate_sort', 'click', function(){ var realBg = $('table#sortable_adoptables').css('background-color'); var submitForm = '<form name="submit_order" id="submit_order" action="" method="post"><fieldset><label for="submit">Submit Changes</label><input type="submit" id="submit" value="Submit"></fieldset></form>'; $('.sortable_adoptables').css('background-color', '#FFFF66').animate({ backgroundColor: realBg }, 'slow' ).sortable({ cursor: 'pointer', connectWith: ".sortable_adoptables" }); $(submitForm).insertAfter('p#activate_sort').hide().slideDown(); $('p#activate_sort').attr('id', 'deactivate_sort'); }); $('body').undelegate('submit').delegate('form#submit_order', 'submit', function(event){ event.preventDefault(); var data = $.map($('.sortable_adoptables'), function(v, i){ return $(v).sortable('serialize'); }); data = data.join("&"); $.post('ajax_sort.php', data, function(result){ $('form#submit_order').html(result).delay(5000).fadeOut('slow', function(){ $(this).remove(); }); }); $('.sortable_adoptables').sortable('destroy'); $('p#deactivate_sort').attr('id', 'activate_sort'); }); }); </script> PHP Code:
|
#3
|
|||
|
|||
Thanks, those changes allow the adoptables to be moved between the columns. It dose some weird aligning/snapping or something. When I drag the adoptable to another space it expands the cell to fit both adoptables rather than force the adoptable from that cell into a different one so that only one adoptable is in each space. It just looks a bit messy cause it leaves gaps. Is there an easy way to fix it?
|
#4
|
|||
|
|||
You can add a callback to the receive event and prevent users from putting more than 2 items into the same area. But this might prevent them from sorting if there's no empty space. And if they only have one empty space, it'll probably be a little bit painful to reorder the adoptables
HTML Code:
$('.sortable_adoptables') .css('background-color', '#FFFF66') .animate({ backgroundColor: realBg }, 'slow' ) .sortable({ cursor: 'pointer', connectWith: ".sortable_adoptables", receive: function(event, ui) { var $this = $(this); if ($this.children('table').length > 1) { $(ui.sender).sortable('cancel'); } } }); |
#5
|
|||
|
|||
I tried using that and it made so that the adoptables wouldn't change positions. They can be dragged but when I drop it it snaps back to where it was.
Is there a way to push them horizontally instead of vertically, wrapping through the table. So like if I grab the first adoptable and drag it over one space the second adoptable moves to the first spot. |
#6
|
|||
|
|||
I believe the following if statement for callback of the receive event should do the trick.
HTML Code:
if ($this.children('table').length > 1) { $this.children('table').not(ui.item).appendTo(ui.sender); } |
#7
|
|||
|
|||
That allows the swapping of the adoptables. I like it. <3 Thank you very much for your help. XD
|
Thread Tools | |
Display Modes | |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Creating a "Faction" for adoptables/owned adoptables | Vaporman87 | Questions and Supports | 1 | 03-04-2014 03:38 PM |
Columns after upgrade | draugluin | Questions and Supports | 4 | 10-22-2012 04:49 AM |
Sorting request.... Again. | SilverDragonTears | Questions and Supports | 3 | 09-16-2012 03:02 AM |
Sorting adoptables? (PHP code) | Aasixx | Questions and Supports | 6 | 03-27-2012 06:10 PM |
Choosing Adoptables Type [EASY ADOPTABLES SCRIPT ONLY] | Ashje | Addons/Mods Graveyard | 2 | 05-24-2009 03:17 AM |
What's New? |
What's Hot? |
What's Popular? |