JS實現(xiàn)簡單的拖拽效果

更新時間：2023年09月02日 08:18:17 作者：編程三昧

拖拽是前端實現(xiàn)中比較常用的一種效果, HTML5 提供了較為強大的拖拽 API 支持,今天我們來實現(xiàn)一個簡單的拖拽效果,需要的朋友可以參考下

實現(xiàn)

<div>
    <div id="source" ondragstart="dragstart_handler(event);" draggable="true">
        把我拖拽到下方?。?
    </div>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">目標(biāo)區(qū)域</div>

稍微添加點樣式：

div {
    margin: 0em;
    padding: 2em;
}
#source {
    color: #009688;
    border: 1px solid #009688;
}
#target {
    border: 1px solid black;
}

JS腳本如下：

function dragstart_handler(event) {
    console.log("dragStart");
    // 設(shè)置拖動的格式和數(shù)據(jù)::使用事件目標(biāo)的 id 作為數(shù)據(jù)
    event.dataTransfer.setData("text/plain", event.target.id);
}
function dragover_handler(event) {
    console.log("dragOver");
    event.preventDefault();
}
function drop_handler(event) {
    console.log("Drop");
    event.preventDefault();
    // 獲取拖放目標(biāo)的 id 數(shù)據(jù)
    var data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
    event.dataTransfer.clearData();
}

總結(jié)

今天這只是個簡單的示例，后續(xù)我們可以在此基礎(chǔ)上實現(xiàn)更多的效果。

到此這篇關(guān)于JS實現(xiàn)簡單的拖拽效果的文章就介紹到這了,更多相關(guān)JS實現(xiàn)拖拽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JS
拖拽

相關(guān)文章

用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼
用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼,需要的朋友可以參考下。
2007-03-03
JavaScript實現(xiàn)簡單貪吃蛇效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單貪吃蛇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
JS實現(xiàn)黑色大氣的二級導(dǎo)航菜單效果
這篇文章主要介紹了JS實現(xiàn)黑色大氣的二級導(dǎo)航菜單效果,具有延遲響應(yīng)鼠標(biāo)事件顯示切換效果的功能,非常簡單實用,需要的朋友可以參考下
2015-09-09
關(guān)于js中e.preventDefault()的具體使用
本文主要介紹了關(guān)于js中e.preventDefault()的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Javascript 實現(xiàn)TreeView CheckBox全選效果
Javascript 實現(xiàn)TreeView CheckBox 選中父節(jié)點時所有子節(jié)點全選，取消時全部取消
2010-01-01
JS Map 和 List 的簡單實現(xiàn)代碼
本篇文章是對在JS中Map和List的簡單實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07
JavaScript實現(xiàn)旋轉(zhuǎn)圖像的三種方法介紹
在文檔掃描Web應(yīng)用中,我們需要旋轉(zhuǎn)傾斜的或掃描方向錯誤的文檔圖像,這篇文章主要為大家整理了使用JavaScript旋轉(zhuǎn)圖像的三種方法,希望對大家有所幫助
2024-01-01
php+js實現(xiàn)倒計時功能
由PHP傳入JS處理的時間戳我說怎么老是對不上號呢，原來JS時間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的。恩，基礎(chǔ)還是要補補的
2014-06-06
相冊展示PhotoSwipe.js插件實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊展示PhotoSwipe.js插件實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
Bootstrap免費字體和圖標(biāo)網(wǎng)站(值得收藏)
在這篇內(nèi)容中，我們把這套框架上的免費字體圖標(biāo)做了個整合(當(dāng)然，以后還會不斷的更新)。大家對bootstrap免費字體圖標(biāo)有需要的話，可以參考本教程
2017-03-03