Dragula: Alternate to Qualtrics Drag and Drop | XM Community
Question

Dragula: Alternate to Qualtrics Drag and Drop


Userlevel 5
Badge +11

Hi All,
I've tried to use the drag and drop question in a normal CX survey but it doesn't work very well for mobile when you have a long list. I've gone through and tried various jQuery amendments to the code but it still doesn't really work - here are some snippets:

Reduced the height of each drop box:
jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("height","50px");

Increases the width of each drop box title:
jQuery("#"+ this.questionId+" td.groupsContainerTd div> h2 ").css("width","90%");

Increase the width of each drop box:
jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("width","90%");

Hide the ranking number of the items dropped into the drop box:
jQuery(".rank").hide();

Make alternate list items grey (I can't quite work out how to make every item grey!):
jQuery("#"+this.questionId+" ul.PGRSortable li.ReadableAlt").css("background","lightgrey");

Make the drop boxes the same height as the list of items to be added:
jQuery(".Group ul.PGRSortable").css("height",parseInt(jQuery(".Items").css("height").replace("px",""))- parseInt(jQuery(".Group h2").css("height"))+"px");

The latter piece of code was interesting. I wanted to develop this further to try and make the drop boxes grow as you put more in but I couldn't work it out. Then I came across the Dragula library which seems to answer all my requirements and I was wondering if anyone had managed to build this into a survey question and retrieve the values back into the survey?

bevacqua/dragulahere's a demo:
dragula - Browser drag-and-drop so simple it hurts
Hope someone out there has managed to do this or even found a different solution.

Thanks
Rod


2 replies

Badge

Following!

Userlevel 5
Badge +11

Hi All, Any help would be much appreciated

Thanks

Rod

Leave a Reply