拖動中的味道

468122151 發布于2019-08-19 17:19 / 2687人閱讀

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

拖~

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

H5之拖拽系列

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

dragstart ,drag, dragend.

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

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

dragenter,dragover,dragleave||drop.

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

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

拖拽的坑

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

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

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

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

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

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

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

關于setData,IE只定義了“text”和“URL”兩種有效的數據類型. 但是H5 將類型擴展為所有的MIME。然而這也造成了兼容性的麻煩。聰明的H5 為了兼容IE(因為這個對象是IE發明的). 他在解析的時候會默認將“text”和“URL” 轉為“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();
}

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

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

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

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

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

dropEffect的屬性值分別有

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

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

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

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

而且現在可以使用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 ~
現在可以在html里面直接設置.使用dragzone屬性:

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

舉例 :

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78414.html

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

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

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

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

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

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

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

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

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

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

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