我正在使用
jquery /
javascript来处理这个拖放应用程序,我不得不使用两者的平衡来完成我想要的.
var drop = document.elementFromPoint($(this).offset().left,$(this).offset().top);
我在这里尝试使用这个代码是为了获取我的draggable想要删除的元素(目前正在盘旋).然而,这将永远返回我的可拖动,而不是它下面的表单元格(td).
因为我知道我正在寻找一个td元素,有没有办法将var drop设置为：
var drop = document.elementFromPoint(x,y,’td’)？
还是有更好的方法去做这个？
解决方法
由于document.elementFromPoint返回最顶层的元素,因此您需要临时设置draggable来显示：none或pointer-events：none以找到下面的元素.我在下面创建了一个要点,返回给定点上所有元素的列表.
尝试
var elementsArray = KoreSampl.atPoint(x,yourTableElement);
要么
var elementsArray = KoreSampl.fromEvent(dropEvent,yourTableElement);
然后
for(var i=0; i<elementsArray.length; i++) {
//loop through elementsArray until you find the td you're interested in
}
使用以下要点：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,lastElement));
element.style[styleProp]= style; //restore
return result;
}
};
window["KoreSampl"] = new KoreSampl();
})();
