上传后可排序的图像 - jQuery File Upload答案

【问题标题】：sortable images after upload - jQuery File Upload上传后可排序的图像 - jQuery File Upload
【发布时间】：2013-02-24 17:43:03
【问题描述】：

是否有一种简单的方法可以添加拖动/排序功能，以便我们在上传图片后重新排序

像这样： http://jqueryui.com/sortable/#placeholder

或者像这样： http://jqueryui.com/sortable/#display-grid

【问题讨论】：

标签： jquery file-upload jquery-ui-sortable blueimp

【解决方案1】：

是的，它们可以被排序..只需在最后添加这个

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $( ".files" ).sortable({
            revert: true
        });
    });
</script>

【讨论】：

【解决方案2】：

我用过 blueimp，我用过 DataList。

<asp:UpdatePanel ID="upImages" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <div id="fileupload" style="float:left">
            <div class="fileupload-content">
                <asp:DataList ID="ImageList" runat="server" EnableTheming="false" DataKeyField="Index" OnItemDataBound="ImageList_ItemDataBound"
                 OnItemCommand="ImageList_ItemCommand" HorizontalAlign="Justify">
                    <HeaderTemplate>
                        <tbody class="files">
                    </HeaderTemplate>
                   <ItemTemplate>
                        <td class="preview" style="float:left;"><img id="imglegend"  src="<%#Eval("ImageURL")%>" /></td>
                        <td class="name" style="display: none"><label id="imgSavePath" target="_blank" title="<%#Eval("ImageFullURL")%>"></label></td>
                                  ...                                    
                    </ItemTemplate>
                    <FooterTemplate>
                        </tbody> 
                    </FooterTemplate>
                </asp:DataList>
            </div>
            <div width="500px" style="float:left">
                <span width="50px">Pick photos...</span>
                <input id="file" type="file" name="files[]" title="Bladeren" multiple />
            </div>         
        </div>     
    </ContentTemplate>
</asp:UpdatePanel>

在 DataList 上添加可排序的属性。 $("# tbody").sortable(); template-upload 被评论是因为它正在杀死拖放，因为生成的表中有太多隐藏的行。希望我能帮上忙。

【讨论】：