拖動中的味道

468122151 發(fā)布于2019-08-19 17:19 / 2683人閱讀

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

拖~

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

H5之拖拽系列

1.針對被拖動元素的事件有:

dragstart ,drag, dragend.

觸發(fā)順序為: dragstart(一次)--drag(移動時觸發(fā))--dragend(一次，拖拽結束觸發(fā))

2.針對放置目標上的事件有:

dragenter,dragover,dragleave||drop.

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

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

拖拽的坑

首先拖放元素上面需要設置為draggable 為 true. （默認為false）然后才可以拖動了。

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

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

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

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

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

其實上面真正能投入生產(chǎn)的只有getData和setData。因為我們的目的兼容是IE8+。所以其他的方法，哎~ 不過說都說了也得介紹一下。

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

這里再次闡明一下使用setData和getData事件的時機.

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

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

//html很簡單
 
   
//看一下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();
}

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

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

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

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

來看一看里面有哪些設置值吧

dropEffect的屬性值分別有

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

(2) move：應該把元素移動到放置目標；

(3) copy：應該把拖動元素復制到放置目標；

(4) link：應該在放置目標上打開拖動元素（拖動元素必須是有 URL 的鏈接）。

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

effectAllowed的屬性值分別有:

(1) uninitialized：被拖動元素沒有設置放置行為；

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

(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 事件中設置，effectAllowed必須在dropstart中設置。cao ~
現(xiàn)在可以在html里面直接設置.使用dragzone屬性:

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

舉例 :

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

云服務器 GPU云服務器味道行拖動鼠標拖動拖動布局

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78414.html

重構-改善既有代碼的設計(三)--代碼的壞味道

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

Mr_houzi 2019-08-15 18:13 評論0 收藏0
重構改善既有的代碼設計（代碼的壞味道）

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

Code4App 2019-08-16 13:52 評論0 收藏0
一個有味道的函數(shù)

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

megatron 2019-08-22 15:50 評論0 收藏0
重構：一項常常被忽略的基本功

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

idealcn 2019-08-23 17:56 評論0 收藏0
模仿飛蛾識別味道的神經(jīng)網(wǎng)絡，說明了為什么飛蛾學習速度遠超機器

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

hizengzeng 2019-04-25 18:24 評論0 收藏0