国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

拖動(dòng)中的味道

468122151 / 2679人閱讀

摘要：內(nèi)容不可被拖動(dòng)。指定一個(gè)元素拖動(dòng)發(fā)生時(shí)顯示在光標(biāo)下方，三個(gè)參數(shù)分別是要顯示的元素和光標(biāo)在顯示元素中的坐標(biāo)。返回被拖放文件的對(duì)象。返回事件中傳遞的數(shù)據(jù)類型的類似數(shù)組的集合。

拖~

在js里面關(guān)于拖這個(gè)概念是完全沒有的(except h5). 以前只能造一大堆的輪子，比如使用mousedown + mousemove + mouseup. 這3個(gè)事件結(jié)合起來實(shí)現(xiàn)復(fù)雜的UI操作。 現(xiàn)在，h5出了一個(gè)拖拽系列的事件，可以部分省去我們的勞動(dòng)。
現(xiàn)在基本的理一下吧。

H5之拖拽系列

1.針對(duì)被拖動(dòng)元素的事件有:

dragstart ,drag, dragend.

觸發(fā)順序?yàn)? dragstart(一次)--drag(移動(dòng)時(shí)觸發(fā))--dragend(一次，拖拽結(jié)束觸發(fā))

2.針對(duì)放置目標(biāo)上的事件有:

dragenter,dragover,dragleave||drop.

字面上其實(shí)就可以理解
當(dāng)有元素被拖過來時(shí)，首先會(huì)觸發(fā)dragenter事件，然后觸發(fā)dragover事件，如果你的沒有將拖動(dòng)元素放下，而是移開則會(huì)觸發(fā)dragleave事件。
否則會(huì)觸發(fā)drop事件.

上面只是理論，如果你實(shí)踐起來，你會(huì)發(fā)現(xiàn)。(MD~) 這根本不能用啊~ 所以說,實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。
其實(shí)拖拽里面還有一些坑

拖拽的坑

首先拖放元素上面需要設(shè)置為draggable 為 true. （默認(rèn)為false） 然后才可以拖動(dòng)了。

屬性值 說明
true 內(nèi)容可被拖動(dòng)。
false 內(nèi)容不可被拖動(dòng)。
auto 內(nèi)容執(zhí)行默認(rèn)的瀏覽器行為（圖像、鏈接和被選中的文本可被拖動(dòng)，其他元素不能）

但是上面的設(shè)置只能在IE10+以上運(yùn)行。 如果想向下兼容IE9的話(IE8不考慮). 則需要在元素上綁定mouseDown事件，通過調(diào)用dragDrop()方法來進(jìn)行兼容.

subject.addEventListener("mousedown",function(e){
    subject.dragDrop();
},false);

哎~ 怎么說嘞， 其實(shí)這個(gè)拖拽是IE發(fā)明的，h5把他收錄了并且做了些微創(chuàng)新(其實(shí)改動(dòng)蠻大的). 但是h5新定義的一些屬性在IE的低版本中不能實(shí)現(xiàn)(cao~ 都怪IE一開始沒有提示更新的機(jī)制)
在拖放過程中，會(huì)產(chǎn)生一個(gè)dataTransfer的對(duì)象. 最基本的方法就兩個(gè)一個(gè)是.setData()和.getData(); 這是所有瀏覽器都兼容的。

方法 說明
clearData(format) 清除以特定格式保存的數(shù)據(jù) 。
getData(format) 從 dataTransfer 對(duì)象中讀取指定類型的值，參數(shù)是 MIME 類型。
setData(format, data) 為 dataTransfer 對(duì)象指定特定格式的數(shù)據(jù)，這些數(shù)據(jù)只能在 ondrop 處理程序中讀取。
setDragImage(element, x, y) 指定一個(gè)元素拖動(dòng)發(fā)生時(shí)顯示在光標(biāo)下方，三個(gè)參數(shù)分別是要顯示的 HTML元素和光標(biāo)在顯示元素中的x、y坐標(biāo)。
addElement(element) 如果想要讓某個(gè)元素跟隨被拖拽元素一同被拖拽，可使用該方法。由于只有FF實(shí)現(xiàn)了這個(gè)方法,我這里就不贅述了

其實(shí)上面真正能投入生產(chǎn)的只有g(shù)etData和setData。因?yàn)槲覀兊哪康募嫒菔荌E8+。 所以其他的方法，哎~ 不過說都說了也得介紹一下。

關(guān)于setData,IE只定義了“text”和“URL”兩種有效的數(shù)據(jù)類型. 但是H5 將類型擴(kuò)展為所有的MIME。 然而這也造成了兼容性的麻煩。 聰明的H5 為了 兼容IE(因?yàn)檫@個(gè)對(duì)象是IE發(fā)明的). 他在解析的時(shí)候會(huì)默認(rèn)將“text”和“URL” 轉(zhuǎn)為“text/plain”和“text/uri-list”.

這里再次闡明一下使用setData和getData事件的時(shí)機(jī).

setData(); 只能在dragstart事件中使用
getData(); 只能在drop事件中使用。

其實(shí)也是廢話了。如果要求對(duì)拖拽要求不高的話，只需要對(duì)拖拽設(shè)置一個(gè)dragstart事件就夠了.
對(duì)于setDragImage這個(gè)方法，可以說一下。默認(rèn)的話就是使用被拖拽元素本身，但是使用這個(gè)方法就可以自定義被拖放元素是HTML元素中的哪一個(gè)(也并沒有什么卵用).
這是一個(gè)非?；镜睦?
拖拽實(shí)例

//html很簡(jiǎn)單
 

   

//看一下js代碼(這里是es6的寫法)
let subject = document.querySelector(".subject"),
    container = document.querySelector(".container");
    
subject.addEventListener("dragstart",function(e){
 let data =  e.dataTransfer;
    data.setData("text","123");
    data.addElement(container);
},false);

container.addEventListener("dragover",function(e){
    e.preventDefault();
},false);
container.addEventListener("dragenter",function(e){
    e.preventDefault();
},false);  
container.addEventListener("drop",function(e){
    let data = e.dataTransfer.getData("text");
    this.innerHTML = data;
    console.dir(data);
});
window.ondrop = function(e){
    e.preventDefault();
}

如果你的文件是從外面引入的，瀏覽器默認(rèn)會(huì)自動(dòng)新打開一個(gè)網(wǎng)頁來。 所以這里需要禁止掉瀏覽器的默認(rèn)行為.
使用 e.preventDefault();
由于目標(biāo)元素默認(rèn)不會(huì)開啟容器的功能，這里你需要使用

container.addEventListener("dragover",function(e){
    e.preventDefault();
},false);
container.addEventListener("dragenter",function(e){
    e.preventDefault();
},false);

這兩段代碼開啟容器效果(記住兩個(gè)都必須有).
此外dataTransfer 對(duì)象上還有幾個(gè)屬性.

Property Description
dropEffect 獲取或設(shè)置被拖動(dòng)元素能夠執(zhí)行哪中放置行為，不同的行為顯示相應(yīng)的光標(biāo)。
effectAllowed 表示允許拖動(dòng)元素的哪種 dropEffect。
files 返回被拖放文件的FileList對(duì)象。
types 返回ondragstart事件中傳遞的數(shù)據(jù)類型的類似數(shù)組的集合。

來看一看里面有哪些設(shè)置值吧

dropEffect的屬性值分別有

(1) none：不能放置拖動(dòng)元素（除文本框以外所有元素的默認(rèn)值）；

(2) move：應(yīng)該把元素移動(dòng)到放置目標(biāo)；

(3) copy：應(yīng)該把拖動(dòng)元素復(fù)制到放置目標(biāo)；

(4) link：應(yīng)該在放置目標(biāo)上打開拖動(dòng)元素（拖動(dòng)元素必須是有 URL 的鏈接）。

而且現(xiàn)在可以使用dragzone來代替上面兩個(gè)屬性的設(shè)置.

effectAllowed的屬性值分別有:

(1) uninitialized：被拖動(dòng)元素沒有設(shè)置放置行為；

(2) none：被拖動(dòng)元素不允許有任何行為；

(3) copy：只允許 copy 值的 dropEffect；

(4) move：只允許 move 值的 dropEffect；

(5) copeLink：copy 和 link 值的 dropEffect；

(6) copeMove：copy 和 move 值的 dropEffect；

(7) linkMove：link 和 move 值的 dropEffect；

(8) all：允許任意 dropEffect。

不過感覺并沒有什么卵用. 而且dropEffect必須在dropenter 事件中設(shè)置，effectAllowed必須在dropstart中設(shè)置。cao ~
現(xiàn)在可以在html里面直接設(shè)置.使用dragzone屬性:

屬性值 作用
copy 表示將允許的元素放到該元素上時(shí)，會(huì)將拖拽數(shù)據(jù)復(fù)制到目標(biāo)元素上。
move 表示將允許的元素放到該元素上時(shí)，會(huì)將數(shù)據(jù)移動(dòng)到目標(biāo)元素上。
link 表示將允許的元素放到該元素上時(shí)，將鏈接數(shù)據(jù)到目標(biāo)元素上。

舉例 :

總結(jié)一下吧，如果你有著熱愛新技術(shù)的熱情，不怕瀏覽器的SB，視死如歸的兼容性。拖拽還是有非常大的用處的。
如果你的leader要求你兼容IE8+的話,拖拽什么的都去屎吧~ .不過，如果你不怕麻煩其實(shí)也可以寫兩份js， 一份給現(xiàn)代瀏覽器使用，一份給遠(yuǎn)古的IE用。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78414.html

相關(guān)文章

  • 重構(gòu)-改善既有代碼的設(shè)計(jì)(三)--代碼的壞味道

    摘要：壞味道的代碼重復(fù)代碼會(huì)自動(dòng)標(biāo)注重復(fù)的代碼。一般都是遇到真實(shí)情況后才考慮得到霰彈式修改添加或修改一個(gè)功能引發(fā)多個(gè)類相應(yīng)修改遇到這種情況可以移動(dòng)代碼，將需要修改的代碼都放在同一個(gè)類下。被拒絕的遺贈(zèng)子類應(yīng)該繼承超類的函數(shù)和數(shù)據(jù)。 壞味道的代碼 重復(fù)代碼 idea會(huì)自動(dòng)標(biāo)注重復(fù)的代碼。一般重復(fù)代碼就是可以重構(gòu)的點(diǎn)。 同一個(gè)類的兩個(gè)函數(shù)還有相同的表達(dá)式，這時(shí)需要提煉出重復(fù)代碼。 兩個(gè)互為兄弟的...

    Mr_houzi 評(píng)論0 收藏0

  • 重構(gòu)改善既有的代碼設(shè)計(jì)（代碼的壞味道）

    摘要：壞的味道指的是應(yīng)該被修改，被重構(gòu)的代碼，不具有可讀性，復(fù)用性，判斷邏輯復(fù)雜，冗余代碼。它們通常能指出代碼用途和實(shí)現(xiàn)手法之間的語義距離。把所有和這個(gè)變量相關(guān)的代碼新建一個(gè)類放入。但這往往不夠，請(qǐng)反復(fù)運(yùn)用將某些行為移入類，直到者的協(xié)議一致為止。 壞的味道：指的是應(yīng)該被修改，被重構(gòu)的代碼，不具有可讀性，復(fù)用性，判斷邏輯復(fù)雜，冗余代碼。應(yīng)該使用各種重構(gòu)的手法去改變它！ Duplicated...

    Code4App 評(píng)論0 收藏0

  • 一個(gè)有味道的函數(shù)

    摘要：所以我們分析這個(gè)新需求的效果我們?cè)诤瘮?shù)執(zhí)行到一半時(shí)，執(zhí)行了，的返回值為后續(xù)函數(shù)的執(zhí)行返回值。也就是說，我們?cè)谥刑幚恚苯诱{(diào)用隊(duì)列中的下一個(gè)函數(shù)即可然后監(jiān)聽和回調(diào)，即可在當(dāng)前函數(shù)中獲取到返回值拿到返回值后就可以執(zhí)行我們后續(xù)的代碼。 最近想到了一個(gè)自認(rèn)為很有意思的面試題如何實(shí)現(xiàn)一個(gè)compose函數(shù)。函數(shù)接收數(shù)個(gè)參數(shù)，參數(shù)均為Function類型，右側(cè)函數(shù)的執(zhí)行結(jié)果將作為左側(cè)函數(shù)執(zhí)行的參數(shù)...

    megatron 評(píng)論0 收藏0

  • 重構(gòu)：一項(xiàng)常常被忽略的基本功

    摘要：無論如何，單元測(cè)試一直是一中非常重要卻常常被忽視的技能。在實(shí)踐中，重構(gòu)的要求是很高的它需要有足夠詳盡的單元測(cè)試，需要有持續(xù)集成的環(huán)境，需要隨時(shí)隨地在小步伐地永遠(yuǎn)讓代碼處于可工作狀態(tài)下去進(jìn)行改善。 showImg(https://segmentfault.com/img/bVbttWF?w=1000&h=528); 五月初的時(shí)候朋友和我說《重構(gòu)》出第 2 版了，我才興沖沖地下單，花了一個(gè)...

    idealcn 評(píng)論0 收藏0

  • 模仿飛蛾識(shí)別味道的神經(jīng)網(wǎng)絡(luò)，說明了為什么飛蛾學(xué)習(xí)速度遠(yuǎn)超機(jī)器

    摘要：在飛蛾腦中，章魚胺可以幫助加強(qiáng)產(chǎn)生成功的神經(jīng)線路。廣泛來說，此項(xiàng)研究成果可能給人工神經(jīng)網(wǎng)絡(luò)領(lǐng)域帶來極大的影響。 作為現(xiàn)代機(jī)器學(xué)習(xí)基石的深度神經(jīng)網(wǎng)絡(luò)，雖然模仿的是生物神經(jīng)網(wǎng)絡(luò)，但其實(shí)這兩者之間有著極大的區(qū)別。拋開僅有的一些相似處，有些重要的機(jī)器學(xué)習(xí)機(jī)制沒有任何自然界的版本，而這兩者學(xué)習(xí)過程之間也有著大量的不同。這些區(qū)別很有可能解釋了為什么機(jī)器學(xué)習(xí)系統(tǒng)在某些領(lǐng)域中的表現(xiàn)遠(yuǎn)遜于自然系統(tǒng)。就拿昆蟲來...

    hizengzeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<