使用XUI移動DIV

Question

我試圖用xuijs在div上創建拖動效果。 我真的不知道要看哪個事件聽，也不知道如何處理它以使其滑動。

我需要它跟隨鼠標的光標（僅在X軸移動）

繼承人的什麼IM通常要做

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

如果點擊slideMe一個例子，拖累，它應該從一端移動到另一端（上面的HTML僅僅是一個例子，當然不完全正確）

任何人都有一個大致的想法如何實現這一點？

Answer 1

您可以將Even Listener添加到鼠標以捕獲mousemove。

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

然後你可以移動你的div與mouseMove功能。你可以讓你的遊標休息一下。

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 
    } 

但在這之前，你需要設置你的div風格類似下面

#slideMe{ 
    position:absolute; 
} 

編輯：這些功能使格休耕光標。但是你想用另一個div來移動它，並且是正確的。然後你需要像下面那樣更改這些代碼。

風格：

#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 
    }