JS實現(xiàn)簡易的圖片拖拽排序?qū)嵗a
由HTML5的拖放API,實現(xiàn)的簡易圖片拖放效果。
一、HTML5拖放API的知識點
首先我們得知道元素怎么才可以被拖放,需要設(shè)置它們的draggable屬性,其中img和a標簽的dragable屬性默認是true,不需要我們手動設(shè)置。
拖放API的監(jiān)聽事件如下:
- dragstart: 源對象拖拽開始;
- drag: 源對象拖拽的過程中;
- dragend: 源對象拖拽結(jié)束;
- dragenter: 進入過程對象區(qū)域;
- dragover: 在過程對象區(qū)域內(nèi)移動;
- dragleave: 離開過程對象區(qū)域;
- drop: 源對象拖放到目標區(qū)域。
對于這幾個事件,我們要結(jié)合需求利用preventDefault()取消它的默認行為。
在拖放事件中,提供dataTransfer用于在源對象與目標對象之間傳遞數(shù)據(jù),dataTransfer一般通過e.dataTransfer調(diào)用,dataTransfer的方法如下:
- setData(format, data)
- getData(format);
- clearData()。
以上是一些基礎(chǔ)知識,與其聽我BB,不如去打開MDN,再敲幾行代碼豈不是美滋滋。
二、簡易的圖片拖拽排序。
先放效果圖吧:
首先看看我們的dom結(jié)構(gòu)
<!-- 部分標簽 --> div#drag-wrap div(class="item" id="wrap1") img(id="img1") ... ...
我們需要監(jiān)聽的事件:
const dragCon = document.getElementById('drag-wrap'); dragCon.addEventListener('dragstart', startDrag, false); /** * 這里一定要阻止dragover的默認行為,不然觸發(fā)不了drop */ dragCon.addEventListener('dragover', function (e) { e.preventDefault(); }, false); dragCon.addEventListener('drop', exchangeElement, false);
在dragstart事件中,我們需要記住需要交換的子元素和父元素:
function startDrag(e) { e.dataTransfer.setData('Text', e.target.id + ';' + e.target.parentElement.id); }
最重要的就是在drop事件中處理我們交換元素的邏輯和一些邊緣條件的判斷。
function exchangeElement(e) { e.preventDefault(); const el = e.target; let PE, //要插入位置的父元素 CE; //需要交換的元素 if (el.tagName.toLowerCase() !== 'div') { PE = el.parentElement; CE = el; } else { PE = el; CE = el.querySelector('img'); } /** * 判斷不在控制范圍內(nèi) */ if (!PE.classList.contains('item')) { return; } const data = e.dataTransfer.getData('Text').split(';'); //交換元素 document.getElementById(data[1]).appendChild(CE); PE.appendChild(document.getElementById(data[0])); }
其實如果你充分利用幾個階段的事件,做出的效果會更精致。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在JavaScript中查找字符串中最長單詞的三種方法(推薦)
這篇文章主要介紹了在JavaScript中查找字符串中最長單詞的三種方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01JS構(gòu)建頁面的DOM節(jié)點結(jié)構(gòu)的實現(xiàn)代碼
本來想用json格式的,可是要么有重復(fù),要么得嵌套,所以改用對象嵌套數(shù)組2011-12-12IE6/7 and IE8/9/10(IE7模式)依次隱藏具有absolute或relative的父元素和子元素后再顯示
多數(shù)情況下隱藏(設(shè)置display:none)一個元素,無需依次將其內(nèi)的所有子元素都隱藏。非要這么做,有時會碰到意想不到的bug。2011-07-07uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題詳解
這次項目中做了一個圖片上傳,要求是大于2MB的就壓縮成2MB一下的再上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題,需要的朋友可以參考下2023-03-03