Question

我正在使用dragula拖放javascript：https://cdnjs.cloudflare.com/ajax/libs/dragula/3.0.3/dragula.min.js

我想要的只是当用户改变我需要以某种方式保存它们的块的位置时，每当页面被刷新时，我就像他选择列表时间一样显示它我认为它被称为回调或其他东西。

HTML：

    <div id="dragAndDrop">
    <div id="p1" class="dragDropBlock" runat="server">
        <div class="metro landingAccountContainer">
            <div class="col-lg-8 col-max">
                <img src="hello.gif" />
            </div>
        </div>
    </div>
    <div class="clearBoth"></div>
    <div id="p2" class="dragDropBlock" runat="server">
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-max">
            <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12 clearPadding">
                <img src="hello.gif" />
            </div>


            <div class="clearBoth"></div>
        </div>
    </div>
    <div id="p3" class="dragDropBlock" runat="server">
        <div id="phBenefsAndFavorits">
            <div class="col-lg-12">
                <img src="hello.gif" />
            </div>
            <div class="clearBoth"></div>
        </div>
    </div>
    <div class="clearBoth"></div>
    <div id="p4" class="dragDropBlock" runat="server">
        <div id="phCustom_1" runat="server" class="dd" visible="false">
            <div class="col-lg-12">
                <img src="hello.gif" />
            </div>
        </div>
    </div>
</div>

这是我的javascript函数，可以拖放：

var containers = $("#dragAndDrop").toArray();
    dragula(containers);

在page_Load上我有这段代码：

Hashtable dashboardPosition = new Hashtable();
        dashboardPosition.Add("p1",4);
        dashboardPosition.Add("p2", 3);
        dashboardPosition.Add("p3", 2);
        dashboardPosition.Add("p4", 1);

        p1.Attributes.Add("data-index", dashboardPosition["p1"].ToString());
        p2.Attributes.Add("data-index", dashboardPosition["p2"].ToString());
        p3.Attributes.Add("data-index", dashboardPosition["p3"].ToString());
        p4.Attributes.Add("data-index", dashboardPosition["p4"].ToString());
ScriptManager.RegisterStartupScript(this, GetType(), "YourUniqueScriptKey", "sortDragAndDrops();", true);

这是我在page_load上执行的javascript函数：

function sortDragAndDrops() {
        $('#dragAndDrop').each(function () {
            var $this = $(this);
            $this.append($this.find('.dragDropBlock').get().sort(function (a, b) {
                return $(a).data('index') - $(b).data('index');
            }));
        });
    }

我有类似的东西让你更好地理解： https://jsfiddle.net/qoaqba62/2/

如果某人有另一个Javascript进行拖放操作的答案，并且我可以保存位置，那也很好。

提前致谢！

移动后拖放Javascript保存位置项目

0 个答案: