這篇文章主要介紹“Html5原生拖拽是什么和使用方法”,在日常操作中,相信很多人在Html5原生拖拽是什么和使用方法問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”Html5原生拖拽是什么和使用方法”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比大悟網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式大悟網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋大悟地區(qū)。費(fèi)用合理售后完善,10余年實(shí)體公司更值得信賴。
拖拽實(shí)現(xiàn)
主要用到的是H5自帶的拖拽效果。其實(shí)項(xiàng)目前端部分是使用React編寫的,也是在使用H5實(shí)現(xiàn)了之后才了解到Dan Abramov大佬有個(gè)React-DnD組件對(duì)原生拖拽方法進(jìn)行了封裝。稍微學(xué)習(xí)了一下,很強(qiáng)。后續(xù)有使用到再寫篇文章進(jìn)行分享。
相關(guān)事件定義與用法
涉及一個(gè)屬性六個(gè)事件。事件均為H5原生事件。
屬性
draggable:正常div是不允許進(jìn)行拖動(dòng)的。需要添加屬性draggable="true"將元素設(shè)置為可拖動(dòng)。
事件
ondragstart:拖拽元素事件。在被拖拽時(shí)被調(diào)用。
ondrag:拖拽元素事件。在元素正在被拖拽時(shí)調(diào)用。
ondragend:拖拽元素事件。在拖拽元素放置時(shí)調(diào)用。
ondragenter:放置元素事件。在拖拽元素進(jìn)入到放置元素有效區(qū)域時(shí)調(diào)用。
ondragover:放置元素事件。在拖拽元素覆蓋放置元素有效區(qū)域時(shí)調(diào)用
ondragleave:放置元素事件。在拖拽元素離開放置元素有效區(qū)域時(shí)調(diào)用。
ondrop:放置元素事件。在拖拽元素被放置在放置元素中調(diào)用。
基礎(chǔ)代碼實(shí)現(xiàn)
拖拽元素相關(guān)事件實(shí)現(xiàn)代碼如下。
function handleOndragstart() { /* 該事件為拖拽元素被拖拽時(shí)調(diào)用。一般用于獲取該拖拽元素的唯一標(biāo)識(shí),如id等。以方便后續(xù)數(shù)據(jù)更新時(shí)進(jìn)行元素定位 */ } function handleOndragend() { /* 該事件在拖拽元素被放置時(shí)調(diào)用。一般用于重置變量操作 */ } function handleOndrag() { /* 該事件憑個(gè)人需求進(jìn)行功能實(shí)現(xiàn) */ }
拖拽元素H5代碼如下
該元素為拖拽元素
放置元素相關(guān)事件實(shí)現(xiàn)代碼如下
/* 默認(rèn)情況下,數(shù)據(jù)/元素不能放置到其他元素中。 如果要實(shí)現(xiàn)該功能,我們需要防止元素的默認(rèn)處理方法。我們可以通過調(diào)用 event.preventDefault() 方法來實(shí)現(xiàn) ondragover 事件。 */ function handleOndragover(event) { event.preventDefault(); /* 在這里進(jìn)行你的函數(shù)處理 */ } function handleOndragenter(event) { event.preventDefault(); /* 在這里進(jìn)行你的函數(shù)處理 */ } function handleOndragleave(event) { event.preventDefault(); /* 在這里進(jìn)行你的函數(shù)處理 */ } function handleOndrop(event) { event.preventDefault(); // 清除默認(rèn)事件。drop 事件的默認(rèn)行為是以鏈接形式打開 /* 一般在該事件中,也就是拖拽元素被放下的時(shí)候與后端進(jìn)行交互進(jìn)行數(shù)據(jù)更新 */ }
放置元素H5代碼如下
該元素為放置元素
實(shí)例
以下代碼可實(shí)現(xiàn)在兩個(gè)div之間進(jìn)行子元素的拖拽
拖拽實(shí)現(xiàn)
最后
暫時(shí)寫這么多吧。以上的實(shí)例也是用H5寫的,并沒有使用React實(shí)現(xiàn)。以后再試著寫個(gè)React版的簡單demo吧。這應(yīng)該也算是我的第一篇分享文章,希望能堅(jiān)持下去。
到此,關(guān)于“Html5原生拖拽是什么和使用方法”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!