jQuery UI：我怎么知道 div 以拖动事件为中心

Question

如果我有两个或多个 div 或 p 标签。如果我将“我是标题 H3”（即我的 H3 标签）拖到“我是标题”，我想知道如何在我的小提琴示例（我将在下面提供）中获得每个元素的中心含义H1”（这是我的 H1 标记）或“我是段落 p”（这是我的 p 标记）的一行，表示两个元素彼此中心。

var element = $(".draggable_element");

element.each(function() {
  $(this).draggable({
    zIndex: 999,
    scroll: false,
    refreshPosition: true,
  });
});

Here is my fiddle.

Answer 1

以下代码将帮助您在拖动时找到每个元素的中心。 https://jsfiddle.net/44ve3syv/4/

var element = $(".draggable_element");
element.each(function() {
     $(this).draggable({
            zIndex: 999,
            scroll: false,
        refreshPosition: true,
        drag: function() {
         console.log(1);
        },
        stop:function(){
            checkIfCenter($(this));
        }
        });
  });
  checkIfCenter = function(el){  
    var cPos;
    var elCenter = findCentre(el);
    var isCenter = true;
    $( ".draggable_element" ).each(function() {
      cPos = findCentre($(this));
      console.log(cPos);
      if(cPos.x == elCenter.x && cPos.y == elCenter.y && isCenter){
        isCenter = true;
      }else{
        isCenter = false;
      }
    });
    if(isCenter){
        alert("All elements came in center");
    }
  }
  findCentre = function(el){
    var offset = el.offset();
    var width = el.width();
    var height = el.height();
    var pos = { x : parseInt(offset.left + width / 2),y : parseInt(offset.top + height / 2)}
    return pos;
  }