search

surveyjs / survey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.
https://surveyjs.io/open-source
Other
910 stars 373 forks source link

V2: DnD: slow perfomance at https://surveyjs.io/create-survey-v2 #2243

Open dmitry-kurmanov opened 2 years ago

dmitry-kurmanov commented 2 years ago

Ah you mean changing the image based on the drop target it is over? Yeah, that's not possible at the moment. Note that you shouldn't limit yourself to 1 kind of drag; ie use the manual one in small ranges for ordering items, but use the proper one for adding questions to a survey.

Currently the creator is just very laggy when doing drag & drop from the toolbox. Personally I'd rather have smooth drag & drop, and the UX can be improved by showing contextual information in the drop target instead of on the cursor

.

Originally posted by @SamMousa in https://github.com/surveyjs/survey-creator/issues/2236#issuecomment-977683793

dmitry-kurmanov commented 2 years ago

@SamMousa could you please describe that "very laggy" in greater detail to reproduce on our side. Probably we could fix it with the current approach. If not we will discuss the "pros" and "cons" of using native API with the team.

SamMousa commented 2 years ago

https://webm.red/view/tRfH.webm

As soon as there are a few existing question on the page it becomes very noticably laggy.

dmitry-kurmanov commented 2 years ago

what version of the creator you are using react or knockout?

we faced with some performance problem in react version and this is not related to the implementation of the drag drop.

Could you please check it with the production mode react scripts: https://plnkr.co/edit/bzCV9nGIZUB2e4OB ?

SamMousa commented 2 years ago

The video was filmed on https://surveyjs.io/create-survey-v2

SamMousa commented 2 years ago

Could you please check it with the production mode react scripts:

That is a lot better. Even with more questions on the page performance is very acceptable (hard to see any lag unless really looking for it and moving the mouse like a mad man)

Btw, looking at the drag and drop for item sorting, I can't find a case where you actually change the drag preview. The only spot is the toolbox where you put in a question number. That part I already solved in my fiddle.

dmitry-kurmanov commented 2 years ago

The video was filmed on https://surveyjs.io/create-survey-v2

it is ko version we will investigate it

Btw, looking at the drag and drop for item sorting, I can't find a case where you actually change the drag preview. The only spot is the toolbox where you put in a question number. That part I already solved in my fiddle.

we use it in the ranking question in the Library not in the Creator (but drag drop core is the same): https://surveyjs.io/Examples/Library?id=questiontype-ranking&platform=Reactjs&theme=modern please try to "drag over" item and see the number changes