拖放存储行为

Question

我有一个非常奇怪的问题，我希望有人可以帮助我。简而言之，我决定不允许左右面板之间的拖放（水平;可拖动，可放置），但只能在同一列内上下移动（垂直;可排序）。相反，我已经决定使用一个图标将一个块从右向左移动，反之亦然。见附件截图。

垂直可排序的工作原理是什么，水平“移动”功能对每个块都是第一次工作，但在关闭并重新打开对话框之前不会再次工作。

以下是源代码：

<?php

    $out = '
        <script type="text/javascript">
            function serializeList(container)
            {
                var str = "";
                var els = $("#" + container).find("li");
                for (var i = 0; i < els.length; ++i)
                {
                    var el = els[i];
                    var p = el.id.lastIndexOf("_");
                    var getIdNumber = el.id.split("_");
                    if (p != -1)
                    {
                        str = str + "/" + getIdNumber[1];
                    }
                }
                return str;
            }
            $(document).ready(function(){
                $(function() {
                    $("#blocks-left > ul").sortable({ opacity: 0.8, cursor: "move", update: function() {
                        var order = "/left" + serializeList("blocks-left > ul");
                        $.post("' . base_url() . 'content/admin/reorder_blocks_left/' . $page . '" + order, {' . $this->security->get_csrf_token_name() . ' : "' . $this->security->get_csrf_hash() . '"});
                    }});
                    $("#blocks-right > ul").sortable({ opacity: 0.8, cursor: "move", update: function() {
                        var order = "/right" + serializeList("blocks-right > ul");
                        $.post("' . base_url() . 'content/admin/reorder_blocks_right/' . $page . '" + order, {' . $this->security->get_csrf_token_name() . ' : "' . $this->security->get_csrf_hash() . '"});
                    }});
                    $("#content > ul").sortable({ opacity: 0.8, cursor: "move", update: function() {
                        var order = serializeList("content > ul");
                        $.post("' . base_url() . 'content/admin/reorder_elements/' . $page . '" + order, {' . $this->security->get_csrf_token_name() . ' : "' . $this->security->get_csrf_hash() . '"});
                    }});
                    $("a[id^=\"move-left\"]").click(function() {
                        alert("Clicked a move to left icon!");
                        var theID = $(this).parent().attr("id");
                        var theIDNumber = theID.split("_");
                        var theContent = $(this).parent().attr("data-content");
                        var theText = $(this).parent().attr("data-move-text");
                        $("#blocks-left > ul").append("<li data-move-text=\"Click to move right\" data-content=\"" + theContent + "\" style=\"padding: 5px; margin: 5px 0; background-color: #CCEEFF; color: #444444; border: 1px solid #A7C1CE;\" id=\"" + theID + "\"><a id=\"move-right-" + theIDNumber[1] + "\" href=\"#\"><img style=\"width: 16px; height: 16px; margin-right: 16px;\" src=\"' . base_url() . 'assets/images/reorder.png\" alt=\"Click to move right\" title=\"Click to move right\" /></a>" + theContent + "</li>");
                        $(this).parent().remove();
                        $.post("' . base_url() . 'content/admin/move_block_left/' . $page . '/" + theIDNumber[1], {' . $this->security->get_csrf_token_name() . ' : "' . $this->security->get_csrf_hash() . '", rand : "rid-' . mt_rand(0, 19999999) . '" });
                    });
                    $("a[id^=\"move-right\"]").click(function() {
                        alert("Clicked a move to right icon!");
                        var theID = $(this).parent().attr("id");
                        var theIDNumber = theID.split("_");
                        var theContent = $(this).parent().attr("data-content");
                        var theText = $(this).parent().attr("data-move-text");
                        $("#blocks-right > ul").append("<li data-move-text=\"Click to move left\" data-content=\"" + theContent + "\" style=\"padding: 5px; margin: 5px 0; background-color: #CCEEFF; color: #444444; border: 1px solid #A7C1CE;\" id=\"" + theID + "\"><a id=\"move-left-" + theIDNumber[1] + "\" href=\"#\"><img style=\"width: 16px; height: 16px; margin-right: 16px;\" src=\"' . base_url() . 'assets/images/reorder.png\" alt=\"Click to move left\" title=\"Click to move left\" /></a>" + theContent + "</li>");
                        $(this).parent().remove();
                        $.post("' . base_url() . 'content/admin/move_block_right/' . $page . '/" + theIDNumber[1], {' . $this->security->get_csrf_token_name() . ' : "' . $this->security->get_csrf_hash() . '", rand : "rid-' . mt_rand(0, 19999999) . '" });
                    });
                });
            });
        </script>
        <div class="row-fluid">
            <div class="span12">
                <h1>Page layout</h1>
                <p>To change the layout of a page, please click on the block or content piece, hold the mouse button, and drag it down to the position you want it in. When done, simply close the dialog.</p>
                <div class="row-fluid">
                    <div class="span3">
                        <div id="blocks-left" style="padding: 5px;">
                            <ul style="border: 1px dashed #cccccc; list-style: none; margin: 0; padding: 10px 15px;">
    ';
    if (isset($left_blocks) && is_array($left_blocks) && !empty($left_blocks))
    {
        foreach ($left_blocks as $key => $val)
        {
            $out .= '<li data-move-text="Click to move right" data-content="' . $val['title'] . '" style="padding: 5px; margin: 5px 0; background-color: #CCEEFF; color: #444444; border: 1px solid #A7C1CE;" id="block_' . $val['block_id'] . '"><a id="move-right-' . $val['block_id'] . '" href="#"><img style="width: 16px; height: 16px; margin-right: 16px;" src="' . base_url() . 'assets/images/reorder.png" alt="Click to move right" title="Click to move right" /></a>' . $val['title'] . '</li>';
        }
    }
    $out .= '
                            </ul>
                        </div>
                    </div>
                    <div class="span6">
                        <div id="content" style="padding: 5px;">
                            <ul style="border: 1px dashed #cccccc; list-style: none; margin: 0; padding: 10px 15px;">
    ';
    if (isset($content) && is_array($content) && !empty($content))
    {
        foreach ($content as $key => $val)
        {
            $out .= '<li style="padding: 5px; margin: 5px 0; background-color: #CCEEFF; color: #444444; border: 1px solid #A7C1CE;" id="arrayorder_' . $val['content_id'] . '">' . $val['title'] . '</li>';
        }
    }
    $out .= '
                            </ul>
                        </div>
                    </div>
                    <div class="span3">
                        <div id="blocks-right" style="padding: 5px;">
                            <ul style="border: 1px dashed #cccccc; list-style: none; margin: 0; padding: 10px 15px;">
    ';
    if (isset($right_blocks) && is_array($right_blocks) && !empty($right_blocks))
    {
        foreach ($right_blocks as $key => $val)
        {
            $out .= '<li data-move-text="Click to move left" data-content="' . $val['title'] . '" style="padding: 5px; margin: 5px 0; background-color: #CCEEFF; color: #444444; border: 1px solid #A7C1CE;" id="block_' . $val['block_id'] . '"><a id="move-left-' . $val['block_id'] . '" href="#"><img style="width: 16px; height: 16px; margin-right: 16px;" src="' . base_url() . 'assets/images/reorder.png" alt="Click to move left" title="Click to move left" /></a>' . $val['title'] . '</li>';
        }
    }
    $out .= '
                            </ul>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    ';
    echo $out;

?>

在查看下面生成的来源时，您可以看到我没有明显的理由可以移动ID为<li>和block_1的{​​{1}}，但是标识为block_2的{​​{1}}不会第二次移动。奇异...

从上面的代码中，您可以假设所有PHP变量都已正确填充。

任何帮助将不胜感激......

Answer 1

此处没有回复，截止日期过于接近，所以我没有解决这个问题，但是重写了整个代码部分，并且现在有了可行的替代方案。