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,
  });
});

這是我的小提琴。

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;
  }