다른 div 안에 div가 있고 사용자가 부모를 가리키면 inner div가 마우스 위치를 따릅니다. 그러나 마우스가 부모의 가장자리에있을 때 아이의 경계는 부모를 넘어갑니다. 나는 아이 div의 국경이 항상 그 부모들 속에 포함되도록 그것을 만들고 싶습니다. div 마우스를 부모 마우스로 이동시킵니다.
나는 내가 지금까지 만든 한 내용의 바이올린을했다 : https://jsfiddle.net/0ahqoycg나는 내부 사업부의 top 속성이 외부의 top에서 특정 길이인지 확인하고 있습니다에 대해 생각하고 있는지있어 해결책 그런 다음 마우스 위치 추적을 중지하십시오. 왼쪽, 오른쪽 및 아래쪽도 마찬가지입니다.
부모님이 자녀의 국경을 유지하는 좋은 방법이 있다면 누구에게 말해 줄 수 있습니까? 허용 좌표를 계산하는 .offset(), .width() 및 .height() 사용
mouseover 이벤트가 생성되기 때문에 성능을 높이기 위해 외부에서 외부로 미리 계산합니다.//fine tune tweaks으로 표시된 2 개의 섹션은 경계가 초과 경계 위치 인 경계 제한을 초과하기 전에 마지막으로 몇 분의 누락 된 이벤트를 완화하는 데 사용됩니다. 명심해야 할var innerDiv = $('#inner');
var outerDiv = $('#outer');
var outDim = outerDiv.offset();
outDim.right = (outDim.left + outerDiv.width());
outDim.bottom = (outDim.top + outerDiv.height());
$(document).on('mousemove', function(e) {
var x = (e.clientX) - 15;
var y = (e.clientY) - 15;
var x_allowed = x >= outDim.left && x <= (outDim.right - innerDiv.width());
var y_allowed = y >= outDim.top && y <= (outDim.bottom - innerDiv.height());
if (y_allowed) {
innerDiv.css({
top: y + 'px',
});
} else {
//fine tune tweaks
if (y >= outDim.top) {
innerDiv.css({
top: (outDim.bottom - innerDiv.height()) + 'px',
});
}
if (y <= (outDim.bottom - innerDiv.height())) {
innerDiv.css({
top: outDim.top + 'px',
});
}
}
if (x_allowed) {
innerDiv.css({
left: x + 'px'
});
} else {
//fine tune tweaks
if (x >= outDim.left) {
innerDiv.css({
left: outDim.right - innerDiv.width() + 'px',
});
}
if (x <= (outDim.right - innerDiv.width())) {
innerDiv.css({
left: outDim.left + 'px',
});
}
}
});#wrap {
height: 200px;
width: 200px;
border: 2px solid black;
}
#outer {
height: 100px;
width: 100px;
border: 2px solid blue;
margin: 0 auto;
}
#inner {
height: 40px;
width: 40px;
border: 2px solid red;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="outer">
<div id="inner">
</div>
</div>
</div>정말 고마워. 고마워. 마우스가 외부 div의 가장자리에 있더라도 내부 div가 여전히 이동하고 포함될 수있는 방법이 있는지 알고 있습니까? 그것은 마우스가 바깥 쪽 div의 가장자리 근처에있을 때 내부 div가 '붙어있는'때 이상한 느낌입니다. – MarksCode
@MarksCode greedy huh : D, 빨리 움직일 때 이상합니다. 천천히 움직여 라. : D하지만 그렇습니다. 최적화를 시도하겠습니다. 그러나 문제가 해결되면이를 수락하십시오. btw 코드를 계속 업데이트하겠습니다. 나는 그것에 사로 잡혀있어. – Iceman
나는 그것을 받아 들였다, 나는 이것이 매우 흥미있는 것을 알기 때문에 기쁘다. tether.io라고 불리는 주석에 언급 된 라이브러리가 있지만이 작업을 독립적으로 수행하면 훨씬 더 시원할 것입니다. – MarksCode
의 라인을 따라 뭔가 ...
var innerDiv = $('#inner');
var outerDiv = $('#outer');
innerDivWidth = innerDiv.outerWidth();
innerDivHeight = innerDiv.outerHeight();
var offset = outerDiv.offset();
var l = offset.left + 15;
var t = offset.top + 15;
var h = outerDiv.outerHeight();
var w = outerDiv.outerWidth();
var maxx = l + w - innerDivWidth;
var maxy = t + h - innerDivHeight;
$(document).on('mousemove', function(e) {
if(e.clientY <= maxy && e.clientY >= t) {
$('#inner').css({
top: (e.clientY - 15) + 'px'
});
}
if(e.clientX <= maxx && e.clientX >= l) {
$('#inner').css({
left: (e.clientX - 15) + 'px'
});
}
});
한 것은 당신이 실행 코드를 유지해야한다는 것입니다 이벤트 발사시 매우 가늘다. 특히 mousemove과 같은 이벤트는 초당 수백 번씩 실행될 수 있습니다.
발췌 Jquery Doc.
픽셀의 경우에도 마우스 포인터가 움직일 때마다 mousemove 이벤트가 트리거된다는 점에 유의하십시오. 즉, 매우 적은 시간에 수백 개의 이벤트 을 생성 할 수 있습니다. 처리기에서 을 처리하여 중요한 처리를 수행하거나 이벤트에 대한 처리기가 여러 개있는 경우 브라우저에서 심각한 성능 저하가 발생할 수 있습니다. 따라서 mousemove 핸들러를 만큼 최적화하고 더 이상 필요없는 즉시 바인딩을 해제하는 것이 중요합니다.
쿼리가 * 내부 div가 여전히 이동하고 외부 div의 가장자리 근처에 있더라도 포함될 수 있도록 하시겠습니까? *이 해결 방법은 작동합니다. –
당신은이 도서관을 좋아할 것입니다 : http://tether.io/ – bruchowski
u 내부의 아이가 아닌 외부, 이유에 의해 다른 스트림을 사용하기 때문에 positiion : absolute. 어떤 정보가 내면에 놓이기를 원합니까? –
@AndreyFedorov 그게 뭐죠? – MarksCode