欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年09月02日 08:18:17   作者：編程三昧  
拖拽是前端實現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論