问题概述：

我正在创建圆形div元素作为地图上的位置标记。 我的代码读取数据库表中的总行数，并执行一个循环来创建多个div元素，并使用从数据库返回的数据分配每个div ID。 每个div元素都附加到一个div类（marker_mother）。 所有这些都可以很好地工作，从而在页面上形成一排圆形div元素。

下一步是让每个div元素都可以拖动。 我使用.each（）jQuery方法遍历类（marker_mother）中的所有div元素，并使用jQuery UI中的Draggable交互将其设置为可拖动。 我一直在使用下面的Stack Overflow Q＆A作为参考：jQuery通过具有相同类的元素进行循环。 然而，我所有的尝试都会导致课程设置为可拖动的，而不是个别的div。 这意味着所有divs在拖动时都会作为一个统一的整体进行响应。

---

码：

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>

---

对我来说，它看起来像是影响了marker_mother元素而不是它的子元素（您添加的div）。

尝试更改此代码：

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

对此：

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

以便您在每个函数中可拖动的元素是.marker_mother元素内的div。

如果这有效，那么你可以在这些div中添加一个'.marker'或'。'marker-draggable'类，这样你的选择就可以更加明确了（使用上面的代码，'.marker_mother'中的所有div都可以拖动） 。 如果只将可拖动元素附加到“.marker_mother”元素，则这可能不是必需的。

---

问题是你循环所有元素与类marker_mother而不是孩子。 但在这种情况下，您不需要$.each()循环。

只需调整你的选择器并draggable就可以处理剩下的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));
    }
  });

---

例

链接地址: http://www.djcxy.com/p/83523.html

上一篇: Unable to make individual divs in class draggable using jQuery .each loop

下一篇: Check if input is empty, if not, add class to parent div