相當於jQuery.draggable的原生JavaScript（）

是否存在與jQuery的可拖動相當的原生JavaScript代碼？我不需要所有功能，但相當於jQuery.draggable的原生JavaScript（）

能夠從句柄中拖動模態窗口。
開始和結束事件，因爲我需要做一個覆蓋層，而拖動，以防止鼠標在模態窗口內的iframe上。
文檔上只有一個可拖動的項目。

2011-10-17 Moe Sweet

http://html5doctor.com/native-drag-and-drop/爲什麼你不希望使用jQuery的？ – Jere

當然，相當於..寫它。或者120k只需將其包含到您的網站並去吃午飯。老實說，這裏有什麼問題？有人可以給我寫一些偉大的代碼，我已經知道在哪裏可以找到，而且完全免費，但寧可不使用？ – Sinetheta

根本沒有jQuery，或者沒有'jQuery.draggable'？對於完全沒有jQuery的瀏覽器支持來說，這將非常複雜;如果你可以使用直接的jQ，使用'。mousedown（）'和'.mouseup（）'和'.mousemove（）'。將開始的「e.pageX」和「e.pageY」值與開始對話框位置一起存儲起來，並使用增量值移動東西。 –

使用事件dragstart和dragend。綁定與鼠標的x和y座標相關的模態的位置。

來源

2011-10-17 01:32:39 alex

有HTML5 dnd api，但由於沒有人說過我喜歡它，而且以前的瀏覽器都不支持它，所以我會說你在jQuery中找到了一個很好的解決方案。

來源

2011-10-17 01:32:59 FloydThreepwood

雖然這個問題陳述了原生JavaScript，但我會迴應給出@Moe Sweet評論說jQuery 已啓用。

拖放是一個特殊的事件鏈。這並非難以置信，但它可能具有挑戰性。

簡而言之，拖放是以下步驟/事件：

鼠標按下，拖動啓用
鼠標移動，拖動繼續
鼠標的鬆懈，拖拉被禁用

簡單的解決方案是使用這些事件：mousedown，mousemove，並mouseup

$(anElement).mousedown(foodown); 

function foodown(){ 
    $(window).mousemove(foomove).mouseup(fooup); 
    //stuff 
} 

function foomove(){ 
    //stuff 
} 

function fooup(){ 
    //stuff 
    $(window).unbind('mousemove', foomove).unbind('mouseup', fooup); 
}

應該注意的一點是，繼mousedown需要的事件被綁定到window如果鼠標已經離開了原來的元素，同時保持下來，讓他們被發現。

代碼的「東西」部分是您需要檢查元素的屏幕座標與鼠標的屏幕座標並適當地移動內容的位置。 Motion只在mousemove事件中非常必要，因爲鼠標不會移動mouseup或mousedown事件。

來源

2011-10-17 02:03:27 zzzzBov

使用HTML5方法，其比jQuery的似乎更清潔：

<div draggable="true" 
    ondragstart="event.dataTransfer.setData('text/plain', '12345')"> 
drag me 
</div> 

<div ondragover="return false;" 
    ondrop="this.innerHTML=event.dataTransfer.getData('text/plain')"> 
drop on me 
</div>

來源

2013-02-27 07:40:39

相當於jQuery.draggable的原生JavaScript（）

回答

相關問題