jQuery UI 可排序和可拖动的助手

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 可排序和可拖动的助手

jQuery UI Sortable & draggable helper

javascript

jquery-ui

draggable

jquery-ui-sortable