Improved handling of none ID lists #17

merged 2 commits into from May 7, 2012


None yet

2 participants


I wanted to use your plugin in a project, however I have lots of li elements where they would not have IDs and would have exactly the same contents as other elements in the list therefore the way you were searching for list elements based on the contents of the element was not working.

So I altered the source to use the HTML5 data- attributes to store a node count on each li and div.node in the form of data-tree-node=1 and then when the drop event is raised I can link the two elements by using the jquery attribute selector and data() methods like so:

var sourceLi = $this.find("[data-tree-node=" +"tree-node") + "]");

I also made one other minor change which is I switched draggable's revert option to 'invalid' which I think works a lot better, however you may disagree.

Jonathon Smith Improved the way nodes without IDs are handled using data- attributes…
… instead of searching on html/plain text

Love the hell out of the improvement but the html5 attributes means than html < 5 wouldn't be strictly valid. Could you change this to use the $(element).data('myVar', myVar) to store the information instead?


Hmm I had not considered validation. Yes you could change it to use data() but the only change you would have to make is you would have to use a filter function because jquery does not have a data selector. So instead of:

var sourceLi = $this.find("[data-tree-node=" +"tree-node") + "]");

you would have something like

var sourceID ="tree-node");
var sourceLi = $this.filter(function() { return $(this).data("tree-node") === sourceID } );

That will have a slight performance hit over the first approach but I doubt it would be meaningful. If you think that would be ok I will probably have a go at adding it over the weekend.

Jonathon Smith Changed node find method from data- attributes to jquery data()
This maintains validation on pre-HTML5 documents

I have altered the commit to use the method described above and tested it on Chrome, FF and IE9 and it works fine.

@wesnolte wesnolte merged commit 6fddbda into wesnolte:master May 7, 2012

A great piece of work, thanks for the effort.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment