Multi-Column JQuery Draggable not sorting correctly when droppable is rendered inside one of the columns

Question!

I have built a multi-column interface that is dynamically rendered using JQuery Sortables in MVC3.

Droppables are rendered in either one of two lists arranged in columns or into a third list last users can use to store their droppables when organizing their columns.

When a users drops an item into a position in a column, an ajax call saves the order and column information to the database so that the arrangement is saved. Items can then be rendered in their arranged positions when the user next visits the page.

The problem is that if the page rendered with an item already in one of the lists, sorting subsequently fails silently. Items can be dragged to column but cannot be sorted normally. Items in such columns can be moved to the bottom of the list but not to the top or between other items.

If a column is initially rendered empty, items can be dropped and sorted normally.

I made a fiddle that demonstrates the problem: Fiddle Link

Here is the HTML code:

 <div id="processSteps" class="formulaProcessstepsColumn" >
        <div class="draggableItem" id="process-step-1">Item 1</div>
        <div class="draggableItem" id="process-step-2">Item 2</div>
        <div class="draggableItem" id="process-step-3">Item 3</div>        
    </div>
    <div class="clearboth"/>
    <div class="formula-processsteps-container">
        <div class="drop-column-header">Column A</div>
        <div class="drop-column-header">Column B</div>
    </div>
    <div class="clearboth"/>
    <div class="formula-processsteps-container">
        <div id="formula-processsteps-column-1" class="formulaProcessstepsColumn">
            <div class="draggableItem" id="process-step-4">Item 4</div>
        </div>
        <div id="formula-processsteps-column-2" class="formulaProcessstepsColumn"></div>
    </div>


Answers

For anyone else who runs into this problem...

The cause of the problem is that sortable fails if a list item is rendered in-situ in the HTML as it was here:

<div id="formula-processsteps-column-1" class="formulaProcessstepsColumn">
     <div class="draggableItem" id="process-step-4">Item 4</div>
</div>

The solution is to add the list item dynamically AFTER the HTML sortable has been rendered. We can do this by first defining the empty sortable in HTML:

<div id="formula-processsteps-column-1" class="formulaProcessstepsColumn">
     <!--- note the list item that used to be here has been removed --->
</div>

Then add the list item dynamically using Javascript:

$(document).ready(function() {
...
    $('#formula-processsteps-column-1').html('<div class="draggableItem" id="process-step-4">Item 4</div>')
}

I updated the fiddle if you want to see the working example



This video can help you solving your question :)
By: admin