console
var divList = Array.from(document.querySelectorAll('div'))
var hightlight = document.querySelector('.hightlight')
var lastChild = null
var currentChild = null
var needAppendParent = null
function init() {
divList.forEach(item => {
var bound = item.getBoundingClientRect()
item.bound = JSON.parse(JSON.stringify(bound))
})
}
init()
document.body.addEventListener('touchstart', function(e) {
lastChild = e.target
currentChild = e.target.cloneNode(true)
currentChild.style.cssText = `position:absolute;left:${e.targetTouches[0].pageX }px;top:${e.targetTouches[0].pageY}px;`
document.body.appendChild(currentChild)
hightlight.style.cssText = `display:block;left:${lastChild.bound.left}px;top:${lastChild.bound.top}px;width:${lastChild.bound.width}px;height:${lastChild.bound.height}px;`
})
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
<div class="hightlight"></div>
.tabs {
.tabs-nav-wrap {
position: relative;
border-bottom: 1px solid #dcdee2;
margin-bottom: 16px;
}
.tabs-tab {
position: relative;
display: inline-block;
margin-right: 16px;
padding: 8px 16px;
cursor: pointer;
}
.tabs-inv-bar {
position: absolute;
left: 0;
bottom: 0;
background-color: #2d8cf0;
height: 2px;
transition: transform 300ms ease-in-out;
}
.tabs-nav-scroll {
overflow: hidden;
white-space: nowrap;
}
.tabs-nav {
position: relative;
float: left;
transition: transform 0.5s ease-in-out;
}
.tabs-nav-prev,
.tabs-nav-next {
position: absolute;
width: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
}
.tabs-nav-prev {
left: 0;
}
.tabs-nav-next {
right: 0;
}
.tabs-nav-scrollable {
padding: 0 32px;
}
.tabs-nav-scroll-disabled {
display: none;
}