Question T15589
Visible to All Users

How to create a Drag and Drop survey form?

created a year ago

Hello there,
Currently i'm using a json file, depend on that json survey will appear properly. But now i want to show it a DnD survey form.

demo
I'm following above demo but it's not showing properly i my nextjs project. when i simply paste exact code it shows me double form of the same field (first one is not moveable, second one is like exact example). for that double form is a hassle, other that might be okay i'm exploring.

Currently I'm doing:
creating a JSON file and from that JSON file survey form will appear.

Now i want to:
Select fields according to i want using DnD and also condition based fields will appear.

How can i do that? Can you please tell me about it or give me some suggestions (is it possible or not).

Answers approved by surveyjs Support

created a year ago

Hello Yeasin,
Thank you for reaching out to us. I see that you reference a SortableJS widget demo. This widget will work correctly provided that you installed the following packages within your application:

  • Sortablejs: a third-party library library which contains a SortableJS component code.
  • 'surveyjs-widgets': a SurveyJS library which contains an implementation of a custom question which integrates SortableJS within a Form Library.
    Also, within a Survey Creator component, it would be necessary to register a SortableJS widget by calling the following code:
JavaScript
import { sortablejs } from "surveyjs-widgets"; import * as SurveyCore from "survey-core"; sortablejs(SurveyCore);

You can refer to that demo for more details about configuration.

However, please note that such a question type is already available out of the box. You can configure a Ranking question to allow users to select items and then sort them. For more information, please refer to the following demo: Select Items to Rank. With this option, you will simply require to copy a survey JSON and paste it within your Survey Creator's JSON Editor tab.

JSON
{ "elements": [ { "type": "ranking", "name": "smartphone-features-horizontal-layout", "title": "Please rank the following smartphone features from the most important to the least", "isRequired": true, "choices": [ "Long battery life", "Plenty of storage capacity", "High-quality camera", "Powerful CPU", "Large screen size", "High durability", "Low price" ], "selectToRankEnabled": true, "selectToRankAreasLayout": "horizontal", "minSelectedChoices": 2, "maxSelectedChoices": 3 }, { "type": "ranking", "name": "smartphone-features-vertical-layout", "title": "Please rank the following smartphone features from the most important to the least", "isRequired": true, "choices": [ "Long battery life", "Plenty of storage capacity", "High-quality camera", "Powerful CPU", "Large screen size", "High durability", "Low price" ], "selectToRankEnabled": true, "selectToRankAreasLayout": "vertical", "minSelectedChoices": 2, "maxSelectedChoices": 3 } ], "showQuestionNumbers": false }

I hope this information helps. Please let me know if you have any further questions.