Question

我尝试使用jQuery UI制作可拖动和可排序的内容：

helper:clone属性

它的工作完美，但我不想克隆元素。我想移动它们，当我使用默认帮助器时，元素不可排序。

元素位于堆栈的一个位置，而不是移动其他元素以使空位置形成拖动元素

Answer 1

请参阅下面的Html和脚本

这适用于2个类别

<div class="content">
        <div class="category" data-category="1">
            <div class="noteCategory">
                <h3>Cat 1</h3>
            </div>
            <div id="categorycontent1" class="categoryContent">
                <div class="note cnote" data-id="2" data-category="1">
                    <span class="noteDate">
                        <span class="date">
                            2015-01-01
                        </span>
                        <span class="hour">
                            12:12
                        </span>
                        <a href="#" class="remove"></a>
                    </span>
                    <div class="noteText">
                        note Text
                    </div>
                </div>
                <div class="note cnote" data-id="2" data-category="1">
                    <span class="noteDate">
                        <span class="date">
                            2015-01-02
                        </span>
                        <span class="hour">
                            12:12
                        </span>
                        <a href="#" class="remove"></a>
                    </span>
                    <div class="noteText">
                        note Text 2
                    </div>
                </div>
            </div>
        </div>
        <div class="category" data-category="2">
            <div class="noteCategory">
                <h3>Cat 2</h3>
            </div>
            <div id="categorycontent2" class="categoryContent">
                <div class="note cnote" data-id="5" data-category="2">
                    <span class="noteDate">
                        <span class="date">
                            2015-01-04
                        </span>
                        <span class="hour">
                            12:12
                        </span>
                        <a href="#" class="remove"></a>
                    </span>
                    <div class="noteText">
                        note Text 22
                    </div>
                </div>
                <div class="note cnote" data-id="8" data-category="2">
                    <span class="noteDate">
                        <span class="date">
                            2015-01-06
                        </span>
                        <span class="hour">
                            12:12
                        </span>
                        <a href="#" class="remove"></a>
                    </span>
                    <div class="noteText">
                        note Text 23
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#categorycontent1, #categorycontent2").sortable({
                connectWith: ".categoryContent"
            }).disableSelection();

        });

    </script>

希望这有帮助

jQuery UI Sortable＆amp;可拖动的助手

1 个答案: