Avatar of ROM
ROMFlag for United Kingdom of Great Britain and Northern Ireland

asked on 

Best multi div drag and drop solution for web dev

Hi All,

Struggling a bit with JQuery sortable multisortable.

Been using sortable with single items dragging and dropping and quite happy that has been working great.

Now I have a new requirement to allow multi drag and drop. 

I have this working but I have the following issues:

a) Unless I make a separate event after all dragging and dropping is done the items remain selected as in the class remains the same. If I try to change this as part of the drag and drop it breaks and the additional divs just float with a style and did NOT attach to the new Div.

b) If I try to use a receive: event the same thing happens again. 

What suggestions do people have in a PHP/MySQL/JavaScript requirement to accommodate the multiple div drag and drop with database update events?

Currently single has been working great with Ajax updates in another project.

Scenario is a similar to a booking system.

People requirement appointments at a doctors practice  . so now I have 100-200 people that need appointments scheduling. I need to drag and drop them onto the correct Room and reorder them as single or multiple to ensure I can get people seen by the Doctor.

I need to drag and drop multiple. I need to move between rooms multiple. I need to reorder as multiple at times as well.

And of course need to update the database.

So..... happy to continue with JQuery multisortable but need to work out if these disjointed floating divs with styles suddenly or the norm or I can resolve.

Or please specify tried and tested solutions that people are using for this around the world.

Many thanks in advance



Avatar of undefined
Last Comment
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Is the main issue being able to select multiple items and dragging them to one spot? Or dragging one item at a time and have multiple items in the one spot?

Can you create an example page on your dev server with fake data that you can share or recreate a test case on https://codepen.io or other playground.  This should show what you have so far and the issue you have.
Avatar of ROM
Flag of United Kingdom of Great Britain and Northern Ireland image


Hi Scott,

The issue is dragging multiple items.

I have excellent working projects with single item to multi item spots etc...

I have just been trying to use JQuery multisortable and find that I have a few odd issues.

a) the selected class does not disappear on a drop. And if I put a removeClass statement for the div it makes any more than 1 div float oddly with a style within the html and they do not actually exist linked within my target div.

b) If I try to use a RECEIVE: event trigger then the same odd behaviour happens above.

Both of these mean that if I drag 5 Divs.. Only the 1st Div ends up in the correct place.

That is my main issue.

If I can get multi div drag and drop working with Ajax db updates etc.. then that would be it done... I just thought I would ask if anyone is using anything else VERY successfully as I have been happy with JQuery sortable up to now.

Many thanks in advance

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

I have never had a need to drag multiple items at once. But without looking at your example, it is hard to diagnose. 
Avatar of ROM
Flag of United Kingdom of Great Britain and Northern Ireland image

Blurred text
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.

Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews


IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo