Question

在我的一个页面上，我在网格中有一个产品图像的图库。

用户可以通过拖动来更改图像的顺序（使用sortable.js的推送功能重新定位后更新数据库

我真正想要的是以不同方式设置第一个图像的样式，因此它看起来比其他图像更大（这样，用户就会认识到该图像是该产品的主图库图像。）

我试图在CSS中使用第一个孩子，但它似乎没有用。

这是我的sortable.js代码：

$(function () {


            $("#sortable").sortable({
                stop: function (event, ui) {
                    var data = {
                        imagelist: []
                    };
                    $("#sortable li").each(function () {

                        data.imagelist.push({
                            "ProductImageId": $(this).find(".ProductImageId").html(),
                            "SortOrder": $(this).find(".SortOrder").html()
                        });

                    });
                    var finalval = JSON.stringify(data);

                    $.ajax({
                        type: "POST",
                        url: "product.aspx/UpdateMethod",
                        data: JSON.stringify(data),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            ;
                        }
                    });

                }
            });
            $("#sortable").disableSelection();

        });

这是我的.Net标记：

<asp:Repeater OnItemCommand="rptImages_ItemCommand" ID="rptImages" OnItemCreated="rptImages_ItemCreated" OnItemDataBound="rptImages_ItemDataBound" runat="server">
                                    <HeaderTemplate>
                                        <ul id="sortable">
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <li>
                                                <asp:Image ID="imgThumb" CssClass="product-image" runat="server" ImageUrl='<%# string.Format("~/{0}", Eval("ImageUrl")) %>' />

                                        </li>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </ul>
                                    </FooterTemplate>
                                </asp:Repeater>

这是HTML制作的：

   <ul id="sortable" class="ui-sortable">
   <li class="ui-sortable-handle">
      <img id="ContentPlaceHolder1_rptImages_imgThumb_0" class="product-image" src="img/product/i0.jpg">
   </li>
   <li class="ui-sortable-handle">
      <img id="ContentPlaceHolder1_rptImages_imgThumb_1" class="product-image" src="img/product/i1.jpg">
   </li>
   <li class="ui-sortable-handle">
      <img id="ContentPlaceHolder1_rptImages_imgThumb_2" class="product-image" src="img/product/i2.jpg">
   </li>
   <li class="ui-sortable-handle">
      <img id="ContentPlaceHolder1_rptImages_imgThumb_3" class="product-image" src="img/product/i3.jpg">
   </li>
   <li class="ui-sortable-handle">
      <img id="ContentPlaceHolder1_rptImages_imgThumb_4" class="product-image" src="img/product/i4.jpg">
   </li>
</ul>

像往常一样，我会永远感激任何帮助。

非常感谢提前。

sortable.js - 以不同方式排序可排序列表中的第一项

0 个答案: