jQuery可拖动的多项目

Question

我有基本的javascript代码。

我用库存制作了一个拖放系统。

我的问题是：当前的拖放系统可起作用，但仅适用于一个项目。

我希望所有项目都可以拖动，我该怎么做？

我的代码İs在这里：

 <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");
      }
    });
 });

Answer 1

首先，这不是基本的JavaScript。$()通常是jQuery，这是一个JavaScript库。

其次，您正在重复每个元素上的ID。HTML中的ID将是唯一的。这就是为什么它只是找到一个可以初始化插件的一个。

更改逻辑以使用类class="draggable"，然后在初始化时选择它，$('.draggable')