1

我已经构建了一个多列界面，该界面使用 MVC3 中的 JQuery Sortables 动态呈现。

Droppables 呈现在按列排列的两个列表之一或第三个列表中，最后用户在组织列时可以用来存储他们的 droppables。

当用户将项目放入列中的某个位置时，ajax 调用将顺序和列信息保存到数据库中，以便保存排列。然后，当用户下次访问该页面时，可以将项目呈现在它们排列的位置。

问题是，如果页面呈现的项目已经在其中一个列表中，排序随后会静默失败。项目可以拖到列，但不能正常排序。这些列中的项目可以移动到列表的底部，但不能移动到顶部或其他项目之间。

如果一列最初呈现为空，则可以正常删除项目并对其进行排序。

我做了一个演示问题的小提琴：Fiddle Link

这是HTML代码：

 <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>
4

1 回答 1

0

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

于 2012-11-30T01:13:05.580 回答