javascript - jQuery 用户界面 : How can I know that the div are center on drag event

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