Javascript活動div - 保持mousedown與其他文本在頁面上移動時div的移動

我正在嘗試做一個可移動的div。我知道這是jQuery的單線程，但我不想爲此功能添加100k +。我在下面的工作除了當div移動頁面上的其餘文本的行爲就好像鼠標停下並拖動它（當然是它），所以文本變成高亮或不高亮的鼠標移動。是否有任何相對「簡單」的純JavaScript解決方案？Javascript活動div - 保持mousedown與其他文本在頁面上移動時div的移動

順便說一句：感謝jnoreiga這個代碼。

window.onload = addListeners; 

function addListeners(){ 
    document.getElementById('moveme').addEventListener('mousedown', mouseDown, false); 
    window.addEventListener('mouseup', mouseUp, false); 
} 

function mouseUp() 
{ 
    window.removeEventListener('mousemove', divMove, true); 
} 

function mouseDown(e){ 
    window.addEventListener('mousemove', divMove, true); 
} 

function divMove(e){ 
    var div = document.getElementById('moveme'); 
    div.style.position = 'absolute'; 
    div.style.top = e.clientY + 'px'; 
    div.style.left = e.clientX + 'px'; 
}

及一些測試HTML

<div id="moveme" style="width:100px; background-color:red">Test<br><br>Some more text</div> 

    <div style="position:absolute; top:100px; left:50px;"> 
    <h1>Curriculum</h1> 
    <ul> 
     <li><a href="#">Math</a></li> 
     <li><a href="#">Geometry</a></li> 
     <li><a href="#">Physics</a></li> 
    </ul> 
    </div>

來源

2013-10-16 mseifert

框架和庫的全部重點是這些小問題已經解決了。如果jQuery對你來說太重了，還有其他選擇。請參閱：http://stackoverflow.com/questions/3097600/what-are-the-best-light-weight-solutions-for-drag-and-drop –

謝謝你的SO鏈接。該帖子中的第二個鏈接包含我可以修改的解決方案。 – mseifert

我能找到的代碼here這表明我如何使其發揮作用。該問題似乎是將OnMouseDown設置爲要移動的div。如果將OnMouseDown設置爲窗口，則突出顯示可以被克服（本教程將如何顯示）。我不得不修改顯示的代碼來搜索樹來查找被點擊的父div（例如，如果div中的元素正在使用mousedown而不是div本身）。

來源

2013-10-17 01:21:14 mseifert

Javascript活動div - 保持mousedown與其他文本在頁面上移動時div的移動

回答

相關問題