查找多个可拖动元素的位置

Question

如何找到页面上多个可移动元素的顶部、左侧、底部和右侧位置？我为它尝试了jQuery .position()，但是这个函数只给我最近创建的可移动元素的位置(div)。这是代码-

寻找位置-

  $(document).on('click', function(e) {
   var createdWindow = $(nWindow).position();
   var createdWindow_right = $(nWindow).position().left + $(nWindow).width();
   var createdWindow_bottom = $(nWindow).position().top + $(nWindow).height();
   console.log("Top position: " + createdWindow.top + ", Left position: " + createdWindow.left + ", right position: " + createdWindow_right + ", bottom position: " + createdWindow_bottom);
// returns an object with x/y coordinates of the top-left corner of the element

})；

Div创建-

function windowProperties(containment,x,y,width,height){ //New Window Style and jQuery Functions

$(containment).append('<div id="window'+divCount+'"><p id="para'+divCount+'">Drop Here</p></div>');
nWindow = document.getElementById('window'+divCount);
paragraph = document.getElementById('para'+divCount);
paragraph.style.color = "black";
paragraph.style.fontSize = "20px";
paragraph.style.fontWeight = "bold";
paragraph.style.padding = "10px";
paragraph.style.textAlign = "center";

nWindow.style.width = width+"px"; //680
nWindow.style.position = "absolute";
nWindow.style.height = height+"px";  //294.75
nWindow.style.opacity = "0.5";
nWindow.style.background = "white";
nWindow.style.zIndex = "200";
nWindow.style.top = x+"px";
nWindow.style.left = y+"px";

}；

Answer 1

使用元素的可拖动事件属性，并在拖动事件上发送事件。例如：

<div draggable = true ondragstart="abc(event)>

//some HTML CODE
</div>

<script>

function abc(event)
{
   console.log(event) // here in this event you get all the data of draggable elements
}
</script>

Answer 2

考虑下面的例子。

​

$(function() {
  $.fn.getPosition = function() {
    var results = $(this).position();
    results.right = results.left + $(this).width();
    results.bottom = results.top + $(this).height();
    return results;
  }

  $(".drag").draggable({
    containment: "parent",
    stop: function(e, ui) {
      console.log($(this).attr("id"), $(this).getPosition());
    }
  });
});

.cnt {
  width: 340px;
  height: 340px;
  border: 1px solid black;
}

.drag {
  width: 20px;
  height: 20px;
  background: #ccc;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="cnt">
  <div class="drag" id="box-1"></div>
  <div class="drag" id="box-2"></div>
</div>

​

这会创建一个函数，它可以让你得到完整的位置。然后，您可以在stop回调中将其用于拖动操作。