jQuery Draggable問題

Question

我無法讓下面的循環中最後一個可拖動的項目變爲可拖動（最後一項之前的所有其他項目都很好，它們是可拖動的）。當我查看源代碼最後一個可拖動的時候，「ui-draggable」類未連接到div（當用螢火蟲查看時），它輸出到我的瀏覽器中的最後一個可拖動項目的html看起來很好。有任何想法嗎？由於

  <?php foreach ($categorySliderImages->result() as $idx => $row): ?> 
      <li> 
      <div class="slider"> 
      <div class="slide"> 
       <h2><?= $row->Header ?></h2> 
       <div><?= $row->Teaser ?></div> 
       <p><a href="/products/product/<?= $row->PID; ?>/<?= $row->FID; ?>">Click Here</a> for more information</p> 
      </div> 
      <?php $subImages = $this->products_model->get_category_slider_images($row->PID); ?> 
      <?php foreach ($subImages->result() as $idx2 => $row): ?> 
      <div id="catdraggable<?= $row->IID ?>" style="position: absolute; top:<?= $row->SliderTop ?>px; left:<?= $row->SliderLeft ?>px;"> 
       <img src="/FLPRODIMGS/thumb/<?= $row->Name ?>" /> 
      </div>     
      <script type="text/javascript"> 
       $(function() { 
        $("#catdraggable<?= $row->IID ?>").draggable({ 
         stop: function (event, ui) { 
          p = $("#catdraggable<?= $row->IID ?>").position(); 
          $.post("/admin/set_slider_image_position", { 
           id: '<?= $row->IID ?>', 
           top: p.top, 
           left: p.left, 
           context: 'cat' 
          }) 
         } 
        }); 
       }); 
      </script> 

      <?php endforeach; ?> 
      </div> 
      <?php endforeach; ?> 
      </li> 

Answer 1

我不知道這是否會解決您的問題，但它至少會降低你的網頁一點點的尺寸：而不是重複每次循環迭代的腳本，外界將其移動foreachs，並添加一個類到您想要拖動的div。 因此，像：

<div class="yourclass" data-yourid="<?= $row->IID ?>" id="catdraggable<?= $row->IID ?>" style="position: absolute; top:<?= $row->SliderTop ?>px; left:<?= $row->SliderLeft ?>px;"> 

的data-yourid屬性，所以你可以在以後讀它，它是有效的HTML5。 和結束時，下面的腳本（只有一個時間，即後endforeach S）：

$(function() { 
    $(".yourclass").draggable({ 
     stop: function (event, ui) { 
      p = $(this).position(); 
      $.post("/admin/set_slider_image_position", { 
       id: $(this).attr("data-yourid"), 
       top: p.top, 
       left: p.left, 
       context: 'cat' 
      }) 
     } 
    }); 
}); 

Answer 2

嘗試在內含div包圍目標拖動元件並具有jQuery的引用。這使得你的宣言乾淨了一點：

<div id="draggable"> 
     <div id="drag-<?= $row->IID ?>" style="position: absolute; top:<?= $row->SliderTop ?>px; left:<?= $row->SliderLeft ?>px;"> 
      <img src="/FLPRODIMGS/thumb/<?= $row->Name ?>" /> 
     </div> 
    </div> 

然後你得到這個你的jQuery聲明：

$(function() { 
     $("#draggable div").draggable({ 
       stop: function (event, ui) { 
        p = ui.position; 
        $.post("/admin/set_slider_image_position", { 
           id: ui.helper[0].id, 
           top: p.top, 
           left: p.left, 
           context: 'cat' 
        }) 
       } 
     }); 
});