亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS實(shí)現(xiàn)簡(jiǎn)單的拖拽效果

 更新時(shí)間：2023年09月02日 08:18:17   作者：編程三昧  
拖拽是前端實(shí)現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 API 支持,今天我們來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的拖拽效果,需要的朋友可以參考下

實(shí)現(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>

稍微添加點(diǎn)樣式：

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è)置拖動(dòng)的格式和數(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é)

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

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

相關(guān)文章

最新評(píng)論