jquery-sortable
jquery-sortable copied to clipboard
Groups stop working from within a modal view
Note: bold keywords refer to concepts from my application logic
I've setup the plugin for allowing my users to sort lists of Criteria and Criteria Groups wherein a Criteria belongs to 0..1 Criteria Groups
The following function is used within my application to setup the sortable lists. The challenge I've run into is we're loading this inside of a modal framework (http://jquery.iceburg.net/jqModal/) which works fine, however when I hide and show the modal again the group names don't work. (I'm thinking this is because the destroy code isn't called on hide thus when call initSortableLists()
we call destroy un-initialized sortable objects, then create the new ones. All that being said, I wouldn't think that this should create a problem with the groups, however unless I change the group name on load (right now by adding Date.now()
I can drag the rows but they have no target to land.
function initSortableLists() {
var criteriaList = $("ol.criteria");
var criteriaGroupsList = $("ol.criteria_group");
criteriaList.sortable("destroy");
criteriaGroupsList.sortable("destroy");
criteriaList.sortable({
// This pluggin appears to have an issue when we do a jqmHardHide()
// the jqmShow() wherein iff the name of the criteria group is the same
// as what it was before then the drag and drop won't work.
group: 'criteria'+Date.now(),
pullPlaceholder: false,
handle: ".dragger",
tolerance: 25,
placeholder: '<li class="placeholder"><span class="placeholderText">Drop Here</span></li>',
onDrop: function (item, container, _super, event) {
$(item).removeClass("dragged").removeAttr("style");
$("body").removeClass("dragging");
$(item).addClass("changed-row");
var formKey = $(item).data('formkey');
var criteriaSetIdInputName = formKey+'[CriteriaSetID]';
var criteriaSetId = $(container.el).siblings('.criteriaSetButtons').data('criteriasetid')
$("input[name='"+criteriaSetIdInputName+"']").val(criteriaSetId);
reNumberRows();
calculateCriteriaSetPoints();
showSubmitStrip();
}
});
criteriaGroupsList.sortable({
group: 'criteria_group'+Date.now(),
nested: false,
pullPlaceholder: false,
handle: ".dragger",
tolerance: 25,
placeholder: '<li class="placeholder"><span class="placeholderText">Drop Here</span></li>',
isValidTarget: function (item, container) {
if(item.is(".criteria"))
return true
else {
return item.parent("ol")[0] == container.el[0]
}
},
onDrop: function (item, container, _super, event) {
$(item).removeClass("dragged").removeAttr("style");
$("body").removeClass("dragging");
$(item).children(".criteriaSetForm").addClass("changed-row");
reNumberRows();
calculateCriteriaSetPoints();
showSubmitStrip();
}
});
}
I hope the above gives enough context, essentially if I try to destroy then re-int sortable after the original DOM elems have been removed and replaced the a constant group name make it so I have no targets to place the dragged rows, however if I change the group name on each init everything works fine.
Thanks dude, that really fixed up all the issues i was having
Thanks, this really helped me too. I just had to set a new group name when re-initialising the sortable.
Thank alxndrmlr, It's really help me to save my time!
thank you. this also worked for me!