JS實(shí)現(xiàn)簡單的拖拽效果
更新時(shí)間：2023年09月02日 08:18:17 作者：編程三昧
拖拽是前端實(shí)現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 API 支持,今天我們來實(shí)現(xiàn)一個(gè)簡單的拖拽效果,需要的朋友可以參考下
實(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è)置拖動的格式和數(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è)簡單的示例，后續(xù)我們可以在此基礎(chǔ)上實(shí)現(xiàn)更多的效果。
到此這篇關(guān)于JS實(shí)現(xiàn)簡單的拖拽效果的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)拖拽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了JS打開攝像頭并截圖上傳示例，詳細(xì)JS打開攝像頭并截圖上傳至后端的一個(gè)完整步驟，有興趣的同學(xué)可以了解一下。2017-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件實(shí)現(xiàn)多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板
這篇文章主要介紹了?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板，利用openHarmony內(nèi)置的API?cnavas組件實(shí)現(xiàn)，具體詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)的輪播效果，通過改變圖片的透明度來實(shí)現(xiàn)輪播的效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家?guī)硪黄猨s獲取元素的外鏈樣式的簡單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
原生javascript+CSS實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生javascript+CSS實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了javascript計(jì)算對象長度的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部彈出框功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11 
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動模糊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08