드래그 된 객체 아래에서 여러 요소를 감지합니까? 자바 스크립트/JQuery와

Question

나는 dinamically 객체를 생성하고 JQuery와 사용하여 다음 코드로는 "드래그"만드는 버튼이 있습니다

요소 ID = divId는와 요소를 만드는

createNewDiv(divId); <--local function that creates a new div with id=divId 
$("#"+divId).draggable(); 

드래그 (JQuery와 libs와 덕분에) 따라서 새로 생성 된 요소는 페이지 내 어디든 드래그 앤 드롭 할 수 있습니다.

이제는 A, B 및 C 요소를 모두 만들고 드래그 할 수 있다고 가정합니다. "B"위에 놓고 B는 "A"위에 놓고, 용지 시트를 다른 용지 위에 겹쳐 놓은 것처럼)

각 요소 아래에 어떤 요소가 있는지 감지 할 수있는 방법이 있습니까? 예를 들어 C 위로 마우스를 가져 가면 "요소 B와 요소 A가 아래쪽에 있습니다."(둘 다) 또는 B 호버링시 "요소 A가 아래"를 반환합니까?

jquery에서 elementFromPoint() 또는 .droppable() 메소드와 같은 몇 가지 메소드를 조사했지만, 여러 개의 요소를 반환 할 수없는 것 같습니다. 예를 들어 C는 A 와 B 아래)

이 코드로 상상할 수있는 또 다른 방법은 .droppable()을 재정의하고 재귀 적으로 호출하는 것입니다. 그러나 현재 어떻게 보이지 않습니다. 예를 들면, :

아래

a) 떨어지고, 아무것도 표시되지 얻는다 (어떤 소자 없음)

b) 이상 B를 삭제 - "B를 {A}는"표시

c)를 떨어 뜨리 C B 이상 - "에 C {B는 A는}"크게

Answer 1

나는 것이 작업을 수행하는 가장 좋은 방법을 상상하는 것 감사

jQuery를 또는 기본 자바 스크립트가 될 것이다 (C는 B가 발견 B를 발견) 같은 것을하기 :

var bufferInteger = 0, dragParent = $(container), dragChildren = {}; 
(function layerCalculation(){ 
    dragParent.find('.draggable').each(function(index, val){ 
     var child = $(val), 
      childOffset = { 
      top : child.offset().top, 
      left : child.offset().left, 
      width : child.width(), 
      zIndex : child.css('z-index') 
      }; 
     dragChildren[child.attr('id')].top = childOffset.top; 
     dragChildren[child.attr('id')].left = childOffset.left; 
     dragChildren[child.attr('id')].width = childOffset.width; 
     dragChildren[child.attr('id')].zIndex = childOffset.zIndex; 
    }); 
}()); 

function detectHover(ui){ 
    var currentlyOver, 
     uiElement = ui.helper[0], 
     underStacked = dragChildren, 
     draggedItem = { 
     id  : uiElement.id, 
     offset : { 
      left : uiElement.offsetLeft, 
      top : uiElement.offsetTop 
     } 
    }; 
    underStacked.splice(understacked.indexOf(draggedItem.id), 1); 

    for (var i in underStacked){ 
     if ((underStacked[i].left <= draggedItem.offsetLeft <= (underStacked[i].left - - underStacked[i].width)) { 
      currentlyOver = underStacked.id; 
     } else if (...) { 
      // do some logic here to calculate draggedItem.offsetLeft + draggedItem.width 
     } 
    } 
    if (typeof currentlyOver !== 'undefined'){ 
     return currentlyOver; 
    } else { 
     return false; 
    } 
} 
$('.draggable').bind({ 
    dragstart : function(){ 
     layerCalculation(); 
    }, 
    dragend : function(){ 
     layerCalculation(); 
    }, 
    drag : function(event, ui){ 
     bufferInteger++; 
     if (bufferInteger > 9){ 
      bufferInteger = 0; 
      detectHover(ui); 
      ... 
      // do something with return ID here. 
     } 
    } 
});