Поведение перетаскивания и деградации

Question

У меня очень странная проблема, и я надеюсь, что кто-то может мне помочь. Короче говоря, я решил не разрешать перетаскивание между левой и правой панелями (горизонтально, перетаскиваемое, droppable), но только вверх и вниз внутри одного столбца (вертикально, сортируемо). Вместо этого я решил иметь значок, который перемещает один блок справа налево или наоборот. См. Прикрепленный скриншот.

Случается, что вертикальная сортировка работает, а горизонтальная функция «move» работает ПЕРВОЕ ВРЕМЯ для каждого блока, но не снова, пока я не закрою и не открою диалог.

Вот исходный код:

<?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> с с идентификаторами block_1 и block_2 , но <li> с ID block_3 не будет перемещаться во второй раз. Bizarre ...

Из приведенного выше кода вы можете предположить, что все PHP переменные заполняются правильно.

Любая помощь будет оценена ...

Answer 1

Нет ответов здесь, и срок был запущен слишком близко, так что я не решить эту проблему, но переписал код весь раздел, и иметь работоспособную альтернативу в настоящее время.