2
나는 많은 것을 게시하는 것에 사과드립니다. 아직도 배우고 있습니다! 그래서, 나는 드래그 앤 드롭 아무 문제없이 HTML의 첫 번째 요소; 그러나 두 번째 드래그 앤 드롭을 시도하면 마우스 아래에이라는 숫자가 표시됩니다. 마우스를 움직일 때마다 여전히 드래그되지만, 아래에서는 훨씬 그렇습니다. 뭐가 문제 야?자바 스크립트에서 비교적 위치가 지정된 요소에 드래그 앤 드롭을 구현하십시오.
/* CSS Document */
.square {
position: relative;
width: 100px;
height: 100px;
background: red;
}
p {
padding: 0px;
margin: 0px;
}
이 시간 내 주셔서 모두 감사합니다 :
여기<body>
<p class="square">Thing One</p>
<p class="square">Thing Two</p>
</body>
는 CSS입니다 :
여기// JavaScript Document
var posX;
var posY;
var element;
document.addEventListener("mousedown", drag, false);
function drag(event) {
if(event.target.className == "square") {
element = event.target;
posX = event.clientX -parseInt(element.offsetLeft);
posY = event.clientY -parseInt(element.offsetTop);
document.addEventListener("mousemove", move, false);
}
}
function move(event) {
if (typeof(element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
document.removeEventListener("mousemove", move, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
는 HTML입니다 : 여기
는 자바 스크립트입니다! 나는 그것을 매우 감사한다!
그래서 포지셔닝을'position : absolute;';로 바꿨을 때 작업을 시작했습니다. 그러나 중첩 된 요소가 상위 요소에 따라 위치를 변경하기 때문에 다른 요소에 중첩 된 경우에도 여전히 함수가 필요할 것이라고 말하고있는 것입니다. – Dbz
맞습니다. 두 번째 이슈를 수정하면 즉각적인 문제가 해결되지만, 둘 모두를 고쳐 쓰면 훨씬 더 미래가 보장 될 것입니다. –