XUI를 사용하여 DIV 이동

Question

xuijs를 사용하여 div에 드래그 효과를 만들려고합니다. 어떤 이벤트가 들리는지, 슬라이드를 만들기 위해 어떻게해야할지 모릅니다.

나는 Heres는

일반적으로 slideMe가 클릭하면

<div id="parent" style="width: 100px; height: 20px;"> 
    <div id="slideMe" style="width: 50px; height: 20px;"> 
    </div> 
</div> 

을하려고 어떤 메신저의 예를 (만 x 축에 이동) 마우스 커서를 따라 필요하고 드래그 , 한 끝에서 다른 끝으로 이동해야합니다 (위의 html은 단지 예일 뿐이지 만 완전히 맞지는 않습니다)

누구에게 일반적인 방법이 있습니까?

Answer 1

마우스에 짝수 수신기를 추가하여 mousemove를 캡처 할 수 있습니다.

window.addEventListener('mousemove', mouseMove, false); 

그런 다음 mouseMove 기능으로 div를 이동할 수 있습니다. 해당 div가 커서를 휴면 상태로 만들 수 있습니다. 이 기능은 커서를 경작하는 DIV합니다

function mouseMove(e) { 
    if (IE) { 
     Xcord = event.clientX + document.body.scrollLeft; 
     Ycord = event.clientY + document.body.scrollTop; 
    } else { 
     Xcord = e.pageX; 
     Ycord = e.pageY; 
    } 

    if (Xcord < 0) Xcord = 0; 
    if (Ycord < 0) Ycord = 0; 

    document.getElementById('slideMe').style.top = Ycord + 'px'; 
    document.getElementById('slideMe').style.left = Xcord + 'px'; 

    return true 
    } 

는하지만 그 전에

#slideMe{ 
    position:absolute; 
} 

편집 아래처럼 div의 스타일을 설정해야합니다. 하지만 다른 div에서 levf 및 right로 이동하려고했습니다. 그런 다음 아래 코드를 변경해야합니다.

스타일 :

는

#slideMe{ 
    position:relative; 
} 

기능 : 내가 대답을 좋아

function mouseMove(e) { 
    if (IE) { 
     Xcord = event.clientX + document.body.scrollLeft; 
     Ycord = event.clientY + document.body.scrollTop; 
    } else { 
     Xcord = e.pageX; 
     Ycord = e.pageY; 
    } 

    if (Xcord < 0) Xcord = 0; 
    if (Ycord < 0) Ycord = 0; 

    //document.getElementById('slideMe').style.top = Ycord + 'px'; 
    document.getElementById('slideMe').style.left = Xcord + 'px'; 

    return true 
    }