search

razorjack / quicksand

jQuery plugin. Reorder and filter items with a nice shuffling animation.
https://razorjack.net/quicksand/
GNU General Public License v2.0
1.86k stars 338 forks source link

Is data-id really required? *And a tiny script to auto id. #103

Closed ryh closed 6 years ago

ryh commented 11 years ago

Is data-id really required? Following is how to use script to ID the data element

  var autoID=1;
   $("ul#work-list li").each(function(){
    autoID++;
    autoIDStr="worklist"+autoID;
    $(this).attr("data-id",autoIDStr);
  });

But is there a feature for us do not care about data-id ?

asifrc commented 11 years ago

'data-id' is the default attribute that quicksand uses so that it knows which element to replace/animate. If you look at line 24 of the plugin source, you'll see that it's just an option with a default attribute of 'data-id'. You can use something other than data-id by specifying the attribute option when calling/constructing quicksand. Razorjack gives an example of an alternate attribute implementation on the plugin website at http://razorjack.net/quicksand/demos/attribute.html

ryh commented 11 years ago

@asifrc Thanks for answering .He use ajax to reload the data,which could be expensive. I use data-type like #100 eg:data-type="brand web app" for attributes, and without data-id the script could not show any item,could not find why.

IsraelThompson commented 11 years ago

@ryh, in #100 I only used data-type for sake of simplifying the example wherein data-type was the key factor in sorting. In the page I linked to, data-id is still used to uniquely distinguish each item from the others. I.e. <li data-marginbottom="" data-height="236" data-type="CGI" data-id="id-0" style="">

You can see what I'm referring to here, in action: http://dig-houston.com/portfolio

razorjack commented 6 years ago

You need to provide data-id in to give each iterm an identity. This is how Quicksand recognizes the same items in source and destination collections and moves them around instead of fading in/out.

data-type attribute is used as a helper to filter the results. data-id is what you're looking for, Quicksand will not work without this attribute (or any other attribute that provides an identity to an item). If you're retrieving the items from the database, the database primary key is a good value for item ID.