如何在droppable jquery中删除li元素索引值

时间:2014-09-04 04:54:19

标签: jquery

每次我获得0索引值时,以下是我的代码。

        $("#sortable").droppable({

            drop: function (event, ui) {
                   alert($(ui.placeholder).index() + 1);

            }
        });

1 个答案:

答案 0 :(得分:0)

得到了我的问题的答案,粘贴解决方案以供参考:

`

        <li data-storyid="1" class="sortlistitem">
            <div class="storyListBox">
                <div class="imagecontainer">
                    <img src="dragdropicon.gif" />                      
                </div>
               <%-- <div class="storyTitle">Lord of the Rings</div>
                <div class="storyDesc">About about a ring</div>--%>
                <div class="storyRank">1</div>
               <%-- <div class="controls"><a href="#">Edit</a></div>--%>
            </div>
        </li>
        <li data-storyid="2" class="sortlistitem">
            <div class="storyListBox">
                <div class="imagecontainer">
                    <img src="dragdropicon.gif" alt="" /></div>
              <%--  <div class="storyTitle">Harry Potter</div>
                <div class="storyDesc">Some Wizards</div>--%>
                <div class="storyRank">2</div>
                <%--<div class="controls"><a href="#">Edit</a></div>--%>
            </div>
        </li>
        <li data-storyid="3" class="sortlistitem">
            <div class="storyListBox">
                <div class="imagecontainer">
                    <img src="dragdropicon.gif" alt="" /></div>
               <%-- <div class="storyTitle">Hunger Games</div>
                <div class="storyDesc">Some people fight in an arena</div>--%>
                <div class="storyRank">3</div>
               <%-- <div class="controls"><a href="#">Edit</a></div>--%>
            </div>
        </li>
        <li data-storyid="4" class="sortlistitem">
            <div class="storyListBox">
                <div class="imagecontainer">
                    <img src="dragdropicon.gif" alt="" /></div>
               <%-- <div class="storyTitle">Twilight</div>
                <div class="storyDesc">Fake vampires who rolled in glitter</div>--%>
                <div class="storyRank">4</div>
               <%-- <div class="controls"><a href="#">Edit</a></div>--%>
            </div>
        </li>
        <li data-storyid="5" class="sortlistitem">
            <div class="storyListBox">
                <div class="imagecontainer">
                    <img src="dragdropicon.gif" alt="" /></div>
               <%-- <div class="storyTitle">Ranger's Apprentice</div>
                <div class="storyDesc">Kid in a cloak with a bow</div>--%>
                <div class="storyRank">5</div>
                <%--<div class="controls"><a href="#">Edit</a></div>--%>
            </div>
        </li>
    </ul>

    <div style="clear: both">
        <input type="button" value="Save" id="btnSave" />
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script>
        $(document).ready(function () {
            $('#btnSave').hide();
            $("#ulThumbnailList").sortable({
                opacity: 0.7,
                revert: true,   //Animates
                scroll: true,   //Allows page to scroll when dragging. Good for tall pages.
                handle: $(".sortlistitem img"),
                update: function () {                        
                    $('#btnSave').show()
                }
            });
            $('#btnSave').on('click', function () {
                var items = $(".sortlistitem");
                var itemIds = [];

                for (var x = 0; x < items.length; x++) {
                    itemIds.push(items.eq(x).data('storyid'));
                }

                var parms = { "stories": itemIds.join(',') };
                alert(itemIds.join(','));
            });
        })

    </script>`