Qualtrics Drag-and-Drop: Allowing Just One Item Per Bucket

Question

I've tried using both the Pick, Group, and Rank and the Matrix Table question types (the latter with the drag and drop functionality) to get respondents on a Qualtrics survey to drag just one item out of 10 into each one of 10 buckets.

Unfortunately, while I can of course set validation such that the respondent can't click onto the next page unless they've assigned just one item to each bucket/group, it's still possible to accidentally drop one item into a bucket or a group by mistake, and sometimes it can be difficult to see that or even get the item out of the bucket (this last problem in particular for the Pick, Group, and Rank question type). So what we have right now we think makes it easy to confuse people, as we have set the height of the PGR "groups" (the buckets) to be just big enough that only one item fits in "visually", but in theory you can keep dropping stuff in there, overlapping with the other groups further down on the screen.

So I just want to have some sort of Javascript or jQuery code that will essentially cancel the "drop" of an item into buckets/groups that already have one item in them. This question (jQuery drag and drop - Allow only one item in list) seemed particularly relevant but it didn't work for me for some reason (if that actually does work in Qualtrics then I'd love even just a bit of guidance as to how to make it work for me). Thanks!

Answer 1

Actually figured out how to make this work for my survey. It takes directly from the link I posted above (jQuery drag and drop - Allow only one item in list) so all credit goes to the solution there. If anyone's trying to adapt it to Qualtrics as well, see below, where you of course replace the selector for the buckets you want (i.e. instead of #QID8group0, replace it with the relevant question ID).

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/   
jQuery(function() {
jQuery("ul.droptrue").sortable({
    connectWith: "ul",
});

jQuery("ul.dropfalse").sortable({
    connectWith: "ul",
    dropOnEmpty: false
});

jQuery("#QID8group0,#QID8group1, #QID8group2, #QID8group3, #QID8group4, #QID8group5, #QID8group6,#QID8group7,#QID8group8,#QID8group9").disableSelection();

 jQuery("#QID8group0,#QID8group1, #QID8group2, #QID8group3, #QID8group4, #QID8group5, #QID8group6,#QID8group7,#QID8group8,#QID8group9").on("sortreceive", function(event, ui) {
    var jQuerylist = jQuery(this);

    if (jQuerylist.children().length > 1) {
        jQuery(ui.sender).sortable('cancel');
    }
});
});

});