I'm creating a a tool to build a form builder of sorts using jQuery UI
The tool itself's does the following:
- Includes a list of component in which the user can include (drag) to create a form
- These components can be dragged into a section that groups them together
- There can be multiple sections
- Within each section the components are then sortable
You can view a demo here: http://jsfiddle.net/yd9w0d0d/
(note: the delete and possibly other functions don't work when I migrated this over to jsfiddle for the demo).
The issue seems to be linked in the way a draggable interacts with a sortable. As you can see I have used the option:
connectToSortable: ".component-container", so my draggable items will inherit the capability to be dragged straight into the sortable list of components (utilises the placeholder use for when sorting items). Once a component is dragged over a sortable list it 'adapts' to be included in the list however if you keep dragging and drop it into a "drag components here container" it no longer has the capability to be dropped. It seems by dragging it over a sortable list the helper class DOM is changed and will no longer be accepted in the normal dropping zone.
Steps to reproduce:
- Create two sections (via the "Add a new section" button)
- Drag and drop a component into the first list
- drag a new component via the first already dropped component (invoke the sortable placeholder) and then drop it into the second section. (it wont allow the drop)
I noticed by using the connectToSortable option the helper class used to designate the draggable element is the actual element that is place in the sortable list not the original or the one designated in the dropable "drop" event.
I need help understanding why the component cant be dragged into a drop zone after it has been dragged past a sortable list. Is there a way to reset (destroy and recreate) the dragging element after existing from the sortable list? Is there a better way to integrate a draggables and sortable?