javascript - elementFromPoint chọn phần tử dưới

Question

Tôi đang làm việc với ứng dụng kéo và thả này với jquery/javascript và tôi phải sử dụng số dư của cả hai để hoàn thành những gì tôi muốn.

var drop = document.elementFromPoint($(this).offset().left, $(this).offset().top);

những gì tôi đang cố gắng để làm với mã này ở đây là để có được những yếu tố đó có thể kéo tôi đang cố gắng để được giảm xuống trong (hiện đang lơ lửng trên). Điều này, tuy nhiên, sẽ luôn luôn trả lại kéo của tôi, như trái ngược với các tế bào bảng (td) bên dưới nó.

Kể từ khi tôi biết tôi đang tìm kiếm một yếu tố td, là có một cách để thiết lập var drop là một cái gì đó như:

var drop = document.elementFromPoint(x, y, 'td')?

Hoặc có cách nào tốt hơn để thực hiện việc này không?

Answer 1

Vì document.elementFromPoint trả về phần tử trên cùng, bạn sẽ cần phải tạm thời đặt hình thu nhỏ của mình thành display:none hoặc pointer-events:none để tìm các phần tử bên dưới. Tôi đã tạo ra một gist dưới đây trả về một danh sách của tất cả các yếu tố tại một điểm nhất định.

thử

var elementsArray = KoreSampl.atPoint(x,y,yourTableElement); 

hoặc

var elementsArray = KoreSampl.fromEvent(dropEvent, yourTableElement); 

sau đó

for(var i=0; i<elementsArray.length; i++) { 
    //loop through elementsArray until you find the td you're interested in 

} 

Sử dụng các ý chính dưới đây: https://gist.github.com/2166393

;(function(){ 
    //test for ie: turn on conditional comments 
    var jscript/*@cc_on=@_jscript_version@*/; 
    var styleProp = (jscript) ? "display" : "pointerEvents"; 

    var KoreSampl = function() {}; 
    KoreSampl.prototype.fromEvent = function(e, lastElement) { 
     e = e || window.event; //IE for window.event 
     return this.atPoint(e.clientX, e.clientY, lastElement); 
    }; 
    KoreSampl.prototype.atPoint = function(clientX, clientY, lastElement) { 
     //support for child iframes 
     var d = (lastElement) ? lastElement.ownerDocument : document; 
     //the last element in the list 
     lastElement = lastElement || d.getElementsByTagName("html")[0]; 

     var element = d.elementFromPoint(clientX, clientY); 
     if(element === lastElement || element.nodeName === "HTML") { 
      return [element]; 
     } else { 
      var style= element.style[styleProp]; 
      element.style[styleProp]="none"; //let us peak at the next layer 
      var result = [element].concat(this.atPoint(clientX,clientY,lastElement)); 
      element.style[styleProp]= style; //restore 
      return result; 
     } 
    }; 
    window["KoreSampl"] = new KoreSampl(); 
})(); 

Answer 2

tôi chỉ cần sử dụng event:

$('#foo').on('drop', function(e) { 
    var drop = e.target; 
}); 

Tôi chưa từng làm việc với chức năng kéo và thả nhiều, vì vậy chọn đó sẽ không làm việc. Tuy nhiên, e.target sẽ.

Answer 3

Nếu bạn có thể phân phối với các trình duyệt cũ hơn, CSS sau sẽ hoạt động:

Chỉ áp dụng quy tắc này cho phần tử trên cùng của bạn đang được kéo.

#dragging { 
    pointer-events: none; 
}