Jquery Draggable多項目

我做了一個包含庫存的拖放系統。

我的問題是：目前的拖放系統的工作原理，但只適用於一個項目。

我希望所有項目都是可拖動的，我該怎麼做？

我的代碼是在這裏：

<div class="row"> 
         <?php 
         $query = $dbh->query("SELECT * FROM goods", PDO::FETCH_ASSOC); 
          if ($query->rowCount()){ 
           foreach($query as $row){ ?> 
            <div id="draggable" class="col-md-2"> 
             <img src="<?php echo baseURL.'images/'.$row['image']; ?>" data-id="<?php echo $row['id']; ?>"> 
            </div> 

          <?php } } ?> 
        </div>`

Javascript代碼;

$(function(){ 
    var id = $('img').data('id'); 

    $("#draggable").draggable({ 

    }); 

    $("#droppable").droppable({ 

     over: function(event,ui) { 
     $('#draggable').addClass("gbr"); 
     }, 

     drop:function(event,ui) { 
     $(this) 
      .find("p") 
      .html("Dropped!"); 
      jQuery.ajax({ 
      type: "POST", 
      data: "id=" +id, 
      url: "postgoods.php" 
     }); 
     }, 
     out:function(event,ui) { 
      $('#draggable').removeClass("gbr") 
      $('#droppable').addClass('overee') 
      .find("p") 
      .html("Drop Here"); 
     } 

    }); 

});

來源

2017-02-25 Selin Akyurt

首先這不是基本的javascript。 $()通常是jQuery，它是一個JavaScript庫。

其次，你重複每個元素的id。預計HTML中的ID將是唯一的。這就是爲什麼它只能找到一個初始化插件。

更改您的邏輯來使用類，class="draggable"，然後選擇它，當你初始化，$('.draggable')

來源

2017-02-25 00:16:37 Taplar

$（「拖動」）可拖動（）。它是我的新JavaScript文件。

image

它是我的新html文件，但沒有工作 –

okey謝謝你，我解決了這個問題。非常感謝。 –

Jquery Draggable多項目

回答

相關問題