javascript - Jquery 可拖动多项目

Question

我有基本的 JavaScript 代码。

我制作了一个带有库存的拖放系统。

我的问题是:当前的拖放系统可以工作，但只能用于一项。

我希望所有项目都可拖动，我该如何做到这一点？

我的代码在这里:

 <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')