Доброго времени!
Разбирая
пример, напоролся на
проблему при вставке элемента
subject в элемент
target.
Добавление координат границ
target-а (по getBoundingClientRect()) к top и left
subject-а не оправдано в случае, если
target имеет
style.position="absolute".
Вот пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My own animation test.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.indicator{
width: inherit; height: inherit;
background-color: gray;
position: absolute;
}
.Clickable{
margin-left: 30%;
margin-right: 30%;
width: 40%;
border: 1px solid gray;
cursor: auto;
/*position: absolute;*/
}
.Removable{
position:absolute;
background-color: silver;
border:1px solid aqua;
opacity:0.5;
}
</style>
<script type="text/javascript">
var iter_count = 0;
function getOffsetRect(elem) {
// (1)
var box = elem.getBoundingClientRect()
// (2)
var body = document.body
var docElem = document.documentElement
// (3)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
// (4)
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
// (5)
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
$(document).ready(function(){
$(document).click(function(event){
event = event || window.event
var clickedElem = event.target || event.srcElement
if(clickedElem.className.indexOf('Clickable', 0) >= 0){
var container = document.createElement('DIV')
container.innerHTML='<div class="Removable"><div class="indicator"></div></div>'
var pro = container.firstChild
pro.style.zIndex = clickedElem.style.zIndex + 10;
pro.style.height = clickedElem.clientHeight + 'px'
pro.style.width = clickedElem.clientWidth + 'px'
var br = getOffsetRect(clickedElem)
pro.style.top = br.top + 'px'
clickedElem.appendChild(pro)
var indic = pro.firstChild
if(pro.clientHeight > 16){
indic.style.height = '16px'
indic.style.top = (pro.clientHeight - 16) / 2 + 'px'
}
$(indic).animate({left: clickedElem.clientWidth, width:0}, 2000, null, function(){pro.parentNode.removeChild(pro)})
}else if(clickedElem.className.indexOf('Removable', 0) >= 0){
clickedElem.parentNode.removeChild(clickedElem)
}else if(clickedElem.className.indexOf('indicator', 0) >= 0){
var parent = clickedElem.parentNode
parent.parentNode.removeChild(parent)
}
});
var lastchild = $(".Clickable")[0]
var parent = lastchild.parentNode
while(iter_count++ < 39){
var elem = lastchild.cloneNode(true)
elem.innerHTML = elem.innerHTML.replace("I'm the very first!", "I have been appended later as #"+iter_count)
if(iter_count % 3 ==0) {
elem.style.position = 'absolute'
elem.innerHTML = "I'm positioned absolutely! Try to click ME!"
parent.insertBefore(elem, $(".dummy_separator")[0])
}else parent.insertBefore(elem, lastchild);
}
});
</script>
</head>
<body>
<div class="dummy_separator">
I'm very dummy separator... <br/>Don't click me!
</div>
<div class="Clickable">
TODO: click here, I'm the very first!
</div>
</body>
</html>
Делов-то! Определить, значение
style.position у
target-а...
... но как??
??
??
??
