CODEWITHSUNDEEP
jqueryjquery-mobiledrag-and-dropdraggablejquery-ui-sortable
Aaron Vanston
Aaron Vanston

Reputation: 755

Sortable & Droppable issue with 'connectToSortable' changes DOM structure

I'm creating a a tool to build a form builder of sorts using jQuery UI .draggable, .sortable and .droppable features.

The tool itself's does the following:

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:

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:

  1. Create two sections (via the "Add a new section" button)
  2. Drag and drop a component into the first list
  3. 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?

Upvotes: 0

Views: 946

Answers (1)

Aaron Vanston
Aaron Vanston

Reputation: 755

I ended up solving this issue by completely removing the droppable zone and jQuery .droppable call from the script entirely and relying only on .draggable and .sortable.

You can view the finished working demo here: http://jsfiddle.net/hurq5qre/

I needed to ad some min-height to the sortable container in order to create a sufficient area for the dropzone/sortable zone.

I mimicked the hover class in sortable by adding over/out options to add and remove a class.

Upvotes: 1

Related Questions