Problem Overview:

I am creating circular div elements to serve as location markers on a map. My code reads the total number of rows from a database table and executes a loop to create that number of div elements, assigning each a div id using data returned from the database. Each div element is appended to a single div class (marker_mother). All of this works perfectly, resulting in a row of circular div elements on the page.

The next step is to make each individual div element draggable. I am using the .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. However, all my attempts result in the class being set to draggable and not the individual divs. This means that all divs respond as a unified whole when dragged.

---

Code:

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>

---

To me it looks like you are affecting the marker_mother element instead of its children (the divs that you appended).

Try changing this code:

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

to this:

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

so that the elements that you are making draggable in the each function are the divs inside the .marker_mother element.

If this works then you can add a '.marker' or '.'marker-draggable' class to these divs so that your selection can be more explicit (with the code above, all divs inside the '.marker_mother' will become draggable). This may not be necessary if you are only appending draggable elements to the '.marker_mother' element.

---

The issue is that you looping through all elements with the class marker_mother instead of the children. But in this case you don't need the $.each() loop here.

Just tweak your selector and draggable can handle the rest:

// 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

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

上一篇: 从数组中的对象获取html值

下一篇: 无法使用jQuery .each循环使类中的单个div可拖动