Using RubaXa Sortable, I'm doing a pretty standard (given it's an example on the library's site) drag of an item from one a group to another. I need to store the original and target group ids as variables. All works well except the target is always NULL. The example on the library site doesn't concern itself with addressing evt.target so I'm in the dark on this one.
My example here:
https://jsfiddle.net/0brfa3w5/
HTML:
<div id="catscontainer">
<div id="parentone" class="parentcatcontainer">
<h4 class="parentcathead">Parent Catagory 1</h4>
<ul class="subcatlist" id="ul_parentcatone">
<li id="parentone_subone">Sub One</li>
<li id="parentone_subtwo">Sub Two</li>
<li id="parentone_subthree">Sub Three</li>
</ul>
</div>
<div id="parenttwo" class="parentcatcontainer">
<h4 class="parentcathead">Parent Category 2</h4>
<ul class="subcatlist" id="ul_parentcattwo">
<li id="parenttwo_subfour" style="">Sub Four</li>
</ul>
</div>
</div>
JS:
var sortyMainCats = Sortable.create(catscontainer, {
animation: 250,
ghostClass: "sortable-ghost",
handle: "h4",
draggable: "div",
dataIdAttr: 'id',
onUpdate: function (/**Event*/evt) {
var orderListMain = sortyMainCats.toArray();
var jsonOrderList = JSON.stringify(orderListMain);
}
});
[].forEach.call(document.getElementById('catscontainer').getElementsByClassName('subcatlist'), function (el){
var sortySubCats = Sortable.create(el, {
group: 'titles',
animation: 150,
dataIdAttr: 'id',
onUpdate: function (/**Event*/evt) {
var orderListSub = sortySubCats.toArray();
console.log('Dragged. Subs order is: ' + orderListSub);
},
// Element is dropped into the list from another list
onAdd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
var fromList = evt.from.id; // previous list
var toList = evt.target;
// + indexes from onEnd
console.log(evt);
console.log('Moved to new list. Old list was: ' + fromList + '. New list is: ' + toList);
}
});
});
UPDATE
I lazily hadn't checked the console in JsFiddle as I copied and pasted this from my own version which is producing NULL. Strangely, it's producing a result for me there.
In my original version, a console array of evt shows a target present with values but is NULL when referenced directly (evt.target).
Further investigation hasn't helped much other than coming across an unusual occurrence where the dataIdAttr: 'id' option is acting as if not there in the jsFiddle version, whereas it works as it should on my original. If you're unfamiliar with this version of Sortable, the option specifies that the id of dragged items should be used as identifiers. The (seemingly) random results seen in the console on jsFiddle are the same as when this option is left out. The console printout shows each items id correctly in my original version.
Getting somewhere. It appears it may be down to version differences and, I think, some bugs? My original version was using the most available version from from the library site. As the jsFiddle example needed an online external source I gave it the URL to the js file the github examples use. I tried using the latter on my original site and got the same results as the jsFiddle.
So now evt.target returns a result but has introduced two new issues. It no longer uses the items id in the results and it also seems to specify the wrong target, listing itself (the item) as the target. The original issue was that the evt object showed the correct target in the console array but couldn't be addressed directly with evt.target, as this produced NULL.
To my equal frustration and relief, this was a bug. I ran several simultaneous tests through versions v1.1.1 and v1.2.0 to conclude that something wasn't behaving the way it was intended and filed a bug report.
The author of the library responded with an updated v1.2.1 that has removed the issue I was having.