无法使用 jQuery.each 循环使 class 中的单个 div 可拖动

Question

问题概述：

我正在创建圆形 div 元素作为地图上的位置标记。我的代码从数据库中读取总行数 table 并执行一个循环来创建该数量的 div 元素，使用从数据库返回的数据为每个元素分配一个 div id。每个 div 元素都附加到单个 div class (marker_mother)。所有这一切都完美无缺，在页面上产生了一行圆形 div 元素。

下一步是使每个 individual div 元素都可以拖动。我正在使用 .each() jQuery method to loop through all div elements in the class (marker_mother) and set them to draggable using the Draggable interaction from the jQuery UI. I have been using the following Stack Overflow Q&A as a reference: jQuery to loop through elements with the same class。但是，我所有的尝试都导致 class 被设置为可拖动，而不是 individual divs。这意味着所有 div 在拖动时作为一个统一的整体响应。

代码：

var total_units = "";

$(document).ready(function() {

  // Triggers PHP script to return number of table rows from DB

  $('#get_rows').click(function() {
    $.get('get_coords.php', function(data) {
      total_units = data;
      console.log(data);
    });
  });

  // Posts row number to DB and returns query data (eg. id and colour)
  // Uses returned data in construction of circular div elements

  $('#create_divs').click(function() {
    for (i = 0; i < total_units; i++) {
      $.ajax({
        type: 'POST',
        url: 'get_row.php',
        dataType: 'html',
        data: {
          row: i
        },
        success: function(response) {
          var jsonData = JSON.parse(response);
          jQuery('<div/>', {
            id: jsonData.id,
            css: {
              "position": "relative",
              "top": "200",
              "left": "100",
              "border-radius": "50%",
              "width": "100px",
              "height": "100px",
              "background": "jsonData.colour",
              "font-size": "20px",
              "text-align": "center",
              "line-height": "100px",
              "cursor": "move",
              "z-index": "100"
            },
            href: 'http://127.0.0.1/' + jsonData.id + '.html',
            text: jsonData.id
          }).appendTo('.marker_mother');
          console.log(response);
        }
      });
    }
  });

  // Assigns top&left positions of dragged div to variables
  // Code to store coords in db will be added later

  var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
  }

  // Loops through divs and makes each draggable

  $('.marker_mother').each(function(index, item) {
    $(item).draggable({
      start: function() {
        coordinates(item);
      },
      stop: function() {
        coordinates(item);
      }
    });
  });
});

/* CSS to define characteristics for the marker div class */

.marker_mother {
  position: relative;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 10px;
  text-align: center;
  color: black;
  line-height: 50px;
  cursor: move;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

如概述中所述，我尝试了 .each() 函数的多种实现以使 divs 可拖动（包括引用 DOM 对象和 $(this)).所有尝试都会导致 class (marker_mother) 被设置为可拖动，而不是 individual divs。我觉得这里肯定缺少一些简单的东西。

如有任何想法或建议，我们将不胜感激。

编辑：

HTML 创建的 div 标记最终如下所示：

<div class="marker_mother ui-draggable ui-draggable-handle"> == [=15=]
  <div id="0001" href="http://127.0.0.1/0001.html" style="position: relative; border-radius: 50%; width: 100px; height: 100px; background: lime; font-size: 20px; text-align: center; line-height: 100px; cursor: move; z-index: 100;">0001</div>
  <div id="0002" href="http://127.0.0.1/0002.html" style="position: relative; border-radius: 50%; width: 100px; height: 100px; background: lime; font-size: 20px; text-align: center; line-height: 100px; cursor: move; z-index: 100;">0002</div>
  <div id="0003" href="http://127.0.0.1/0003.html" style="position: relative; border-radius: 50%; width: 100px; height: 100px; background: lime; font-size: 20px; text-align: center; line-height: 100px; cursor: move; z-index: 100;">0003</div>
</div>

解决方案：

haydenwagner 在下面的回答中提供了解决方案。

$('.marker_mother div').each(function(index, item) {

Answer 1

在我看来，您正在影响 marker_mother 元素而不是其子元素（您附加的 div）。

尝试更改此代码：

$('.marker_mother').each(function(index, item) {

对此：

$('.marker_mother div').each(function(index, item) {

这样您在每个函数中设置为可拖动的元素就是 .marker_mother 元素中的 div。

如果可行，那么您可以向这些 div 添加 '.marker' 或 '.'marker-draggable' class 以便您的选择更加明确（使用上面的代码，所有 div 都在里面'.marker_mother' 将变为可拖动）。如果您只是将可拖动元素附加到“.marker_mother”元素，则可能没有必要这样做。

Answer 2

问题是您使用 class marker_mother 而不是子元素来遍历所有元素。但在这种情况下，您不需要 $.each() 循环。

只需调整您的选择器，draggable 即可处理其余部分：

// Assigns top&left positions of dragged div to variables
  // Code to store coords in db will be added later

  var coordinates = function(element) {
    var top = element.position().top;
    var left = element.position().left;
  }

  // Loops through divs and makes each draggable


  $('.marker_mother div').draggable({
    start: function() {
      coordinates($(this));
    },
    stop: function() {
      coordinates($(this));
    }
  });

Example

无法使用 jQuery.each 循环使 class 中的单个 div 可拖动

Unable to make individual divs in class draggable using jQuery .each loop

javascript

each

jquery

jquery-ui

jquery-ui-draggable

问题概述：

代码：

编辑：

解决方案：