jquery-sortable icon indicating copy to clipboard operation
jquery-sortable copied to clipboard

Groups stop working from within a modal view

Open alxndrmlr opened this issue 10 years ago • 4 comments

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.

alxndrmlr avatar Aug 25 '14 15:08 alxndrmlr

Thanks dude, that really fixed up all the issues i was having

gunsmoke avatar Sep 09 '14 17:09 gunsmoke

Thanks, this really helped me too. I just had to set a new group name when re-initialising the sortable.

lochstar avatar Oct 03 '14 06:10 lochstar

Thank alxndrmlr, It's really help me to save my time!

hiep8024 avatar Apr 18 '15 04:04 hiep8024

thank you. this also worked for me!

drunkhacker avatar Jul 26 '16 13:07 drunkhacker