我有一个非常奇怪的问题，希望有人能帮助我。简而言之，我决定不允许在左右面板之间拖放（水平；可拖动，可放置），而只能在同一列中上下拖放（垂直；可排序）。相反，我决定使用一个图标将一个块从右向左移动，反之亦然。请参阅随附的屏幕截图。
发生的情况是垂直排序正在工作，而水平“移动”功能在每个块的第一次工作，但在我关闭并重新打开对话框之前不会再次工作。
这是源代码：
<?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;
?>
查看下面生成的源代码时，您可以看到没有明显的原因可以移动<li>带有 ID 的 sblock_1和block_2，但是<li>带有 IDblock_3的第二次不会移动。奇怪的...
从上面的代码中，您可以假设所有 PHP 变量都已正确填充。
任何帮助将不胜感激...