surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.21k stars 814 forks source link

Ranking element - doubleclick and single touch functionality #7818

Closed tokoro3 closed 5 months ago

tokoro3 commented 9 months ago

Are you requesting a feature, reporting a bug or asking a question?

Feature

What is the current behavior?

Nothing happens when double-clicking or touching a drag & drop element.

What is the expected behavior?

The drag and drop element should be selected on double click (Desktop) or single touch (Smartphone).

This functionality would be useful if the list of drag & drop elements is very long. You first have to drag the element, scroll through the page and then drop it at the top of the page. Especially on smartphones, it can quickly happen that the list of drag & drop elements is longer than the screen. It is then quite difficult to pick up the element and scroll up to the drop area. Perhaps this behavior could be activated via a setting.

Provide the test code

Ranking element JSON snippet:

{
 "pages": [
  {
   "name": "page_test",
   "elements": [
    {
     "type": "panel",
     "name": "page_test_panel",
     "elements": [
      {
       "type": "ranking",
       "name": "ranking_test",
       "title": "Select two options",
       "hideNumber": true,
       "isRequired": true,
       "requiredErrorText": "Input required.",
       "errorLocation": "top",
       "choices": [
        {
         "value": 1,
         "text": "Choice 1"
        },
        {
         "value": 2,
         "text": "Choice 2"
        },
        {
         "value": 3,
         "text": "Choice 3"
        },
        {
         "value": 4,
         "text": "Choice 4"
        },
        {
         "value": 5,
         "text": "Choice 5"
        },
        {
         "value": 6,
         "text": "Choice 6"
        },
        {
         "value": 7,
         "text": "Choice 7"
        },
        {
         "value": 8,
         "text": "Choice 8"
        },
        {
         "value": 9,
         "text": "Choice 9"
        },
        {
         "value": 10,
         "text": "Choice 10"
        },
        {
         "value": 11,
         "text": "Choice 11"
        },
        {
         "value": 12,
         "text": "Choice 12"
        },
        {
         "value": 13,
         "text": "Choice 13"
        },
        {
         "value": 14,
         "text": "Choice 14"
        },
        {
         "value": 15,
         "text": "Choice 15"
        }
       ],
       "maxSelectedChoices": 2,
       "selectToRankEnabled": true,
       "selectToRankAreasLayout": "vertical",
       "selectToRankEmptyUnrankedAreaText": "Drop here"
      }
     ]
    }
   ]
  }
 ]
}

Specify your

JaneSjs commented 9 months ago

Hi @tokoro3, Thank you for your inquiry. Regarding the mobile usage: from what I gather, you would like to move ranking items between the ranked and unranked areas by a single click. We noted down this inquiry for further consideration. We may not support this feature in a short term but may do so in the future. Thank you.

Regarding the double-click on a desktop: I created a separate issue regarding in inquiry. Select Items to Rank - Allow users to move items between the ranked and unranked areas using a double click #7834

We'll update this thread as soon as we get any news to share.

Thank you

JaneSjs commented 6 months ago

Hello @tokoro3, We enhanced the Select Items to Rank element.

With v1.10.1, respondents can move items by a single click. This applies to desktop and mobile devices.

https://github.com/surveyjs/survey-library/assets/22372972/70c9826f-910c-4061-a70b-9d51b1b8c102

Please let us know if the new feature suits your needs.

Thanks

tokoro3 commented 5 months ago

Hello @JaneSjs,

it now meets our needs exactly. Thank you very much.