js組件-可拖動的div

幾天用js實現(xiàn)了鼠標(biāo)拖動div的功能，但是用起來不是那么便捷，于是想著把這個功能做成一個組件，使用的時候直接引入，不用再寫那么多冗余代碼了。

想要實現(xiàn)的效果

只要把div注冊到該組件，目標(biāo)div就都能隨意拖動
可設(shè)置div能夠拖動的范圍

實現(xiàn)分析

js組件的基本寫法和div拖動的邏輯就不再贅述了，前面文章已經(jīng)說過了，可點擊下面鏈接查看

js實現(xiàn)div可拖動

js組件的基本寫法

在這里主要分析下怎么限制拖動的范圍,先看下圖：

限制范圍

拖動時有四種邊緣情況，即圖中的1、2、3、4，我們一一來看

當(dāng)div拖動到位置1時，我你們再往左拖動，都應(yīng)該失效，即拖動div的left 始終等于外層div的left值
當(dāng)div拖動到位置2時，我們再往上拖動，都應(yīng)該無效，即拖動div的top始終等于外層div的top值
當(dāng)div拖動到位置3時，我們再往右拖動，都應(yīng)該無效，即拖動div的left始終等于外層div的left加上外層div的寬度，然后再減去拖動div的寬度
當(dāng)div拖動到位置4時，我們再往下拖動，都應(yīng)該無效，即拖動div的top始終等于外層div的top加上外層div的高度然后減去拖動div的高度

理論知識弄明白了，我們先看下實現(xiàn)的效果吧

有范圍的拖動

下面貼上實現(xiàn)的代碼

html中引入組件，并初始化

html中引入組件

具體的js組件實現(xiàn)

js拖動組件1

js拖動組件2

紹

演示地址： https://sortablejs.github.io/Sortable/
Github：https://github.com/SortableJS/Sortable

SortableJS是一款用于在現(xiàn)代瀏覽器和觸摸設(shè)備上的拖拽插件，不需要jQuery，但支持jQuery,支持Meteor，AngularJS，React，Polymer，Vue，Knockout和任何CSS庫，例如Bootstrap。

特性

支持觸屏設(shè)備和大部分瀏覽器，不支持IE9以下
可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序
拖拽列表有動畫效果
支持拖動手柄（小手）和可選文本
智能自動滾動
高級交換檢測
使用原生HTML5拖放API構(gòu)建
支持Meter、Angular、React、Knockout、Polymer、Vue
支持任意CSS庫，如BootStrap
簡單的API
CDN服務(wù)
不依賴jQuery(但支持jQuery)

安裝

通過npm

npm install sortablejs --save

通過bower

 bower install --save sortablejs

用法

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
var el=document.getElementById('items');
var sortable=Sortable.create(el);

備注：不僅僅是可以使用ul/li，比如div等

官方配置

根據(jù)官網(wǎng)文檔簡單介紹下：

group：字符串或?qū)ο?/li>

string：命名，個人建議用元素id就行,用處是為了設(shè)置可以拖放容器時使用
 array：[name,pull,put]
 name：同string的方法，
 pull：pull用來定義從這個列表容器移動出去的設(shè)置，true/false/'clone'/function
 true:列表容器內(nèi)的列表單元可以被移出；
 false：列表容器內(nèi)的列表單元不可以被移出；
 'clone'：列表單元移出，移動的為該元素的副本；
 function：用來進行pull的函數(shù)判斷，可以進行復(fù)雜邏輯，在函數(shù)中return false/true來判斷是否移出；
 put：put用來定義往這個列表容器放置列表單元的的設(shè)置，true/false/['foo','bar']/function
 true:列表容器可以從其他列表容器內(nèi)放入列表單元；
 false：與true相反；
 ['foo','bar']：這個可以是一個字符串或者是字符串的數(shù)組，代表的是group配置項里定義的name值；
 function：用來進行put的函數(shù)判斷，可以進行復(fù)雜邏輯，在函數(shù)中return false/true來判斷是否放入；

sort：boolean 定義是否列表單元是否可以在列表容器內(nèi)進行拖拽排序
delay：number 定義鼠標(biāo)選中列表單元可以開始拖動的延遲時間；
disabled：boolean 定義是否此sortable對象是否可用，為true時sortable對象不能拖放排序等功能，為false時為可以進行排序，相當(dāng)于一個開關(guān)；
animation：number 單位：ms，定義排序動畫的時間；
handle：selector 格式為簡單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動；
filter：selector 格式為簡單css選擇器的字符串，定義哪些列表單元不能進行拖放，可設(shè)置為多個選擇器，中間用“，”分隔；
draggable：selector 格式為簡單css選擇器的字符串，定義哪些列表單元可以進行拖放
ghostClass：selector 格式為簡單css選擇器的字符串，當(dāng)拖動列表單元時會生成一個副本作為影子單元來模擬被拖動單元排序的情況，此配置項就是來給這個影子單元添加一個class，我們可以通過這種方式來給影子元素進行編輯樣式；
chosenClass：selector 格式為簡單css選擇器的字符串，當(dāng)選中列表單元時會給該單元增加一個class；
forceFallback：boolean 如果設(shè)置為true時，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等；
fallbackClass：string 當(dāng)forceFallback設(shè)置為true時，拖放過程中鼠標(biāo)附著單元的樣式；
scroll：boolean 默認(rèn)為true，當(dāng)排序的容器是個可滾動的區(qū)域，拖放可以引起區(qū)域滾動
事件：
onChoose：function 列表單元被選中的回調(diào)函數(shù)
onStart：function 列表單元拖動開始的回調(diào)函數(shù)
onEnd：function 列表單元拖放結(jié)束后的回調(diào)函數(shù)
onAdd：function 列表單元添加到本列表容器的回調(diào)函數(shù)
onUpdate：function 列表單元在列表容器中的排序發(fā)生變化后的回調(diào)函數(shù)
onRemove：function 列表元素移到另一個列表容器的回調(diào)函數(shù)
onFilter：function 試圖選中一個被filter過濾的列表單元的回調(diào)函數(shù)
onMove：function 當(dāng)移動列表單元在一個列表容器中或者多個列表容器中的回調(diào)函數(shù)
onClone：function 當(dāng)創(chuàng)建一個列表單元副本的時候的回調(diào)函數(shù)

事件對象

to：HTMLElement–移動到列表容器
from：HTMLElement–來源的列表容器
item：HTMLElement–被移動的列表單元
clone：HTMLElement–副本的列表單元
oldIndex：number/undefined–在列表容器中的原序號
newIndex：number/undefined–在列表容器中的新序號

move 事件對象：

to:HTMLElement
from:HTMLElement
dragged:HTMLElement
draggedRect:DOMRect
related:HTMLElement — element on which have guided
relatedRect:DOMRect
willInsertAfter:Boolean — true if will element be inserted after target (or false if before)

方法

option(name[,value])

獲取或設(shè)置選項

closest

對于集合中的每個元素，通過測試元素本身并遍歷DOM樹中的祖先來獲取與選擇器匹配的第一個元素

toArray()

序列化可排序的列表單元的data-id（可通過配置項中dataIdAttr修改）放入一個數(shù)組，并返回這個數(shù)組中

sort()

通過自定義列表單元的data-id的數(shù)組對列表單元進行排序

save()

保存當(dāng)前排序

destroy()

完全銷毀可拖拽功能

總結(jié)以下

SortableJS在某些場景下非常有用，它是一個很好用的前端拖拽解決方案，合理的使用將會帶來某些意想不到的驚喜，比如讓某些不可拖拽模態(tài)框，變成可拖拽模態(tài)（沒有實踐過），喜歡折騰的小伙伴可以收藏學(xué)習(xí)了，本人翻譯功底實在有限，如果對你有幫助，請點個關(guān)注吧！謝謝！

css鏈接

鏈接可以使用任何css屬性(例如,color,font-family,background等)來設(shè)置樣式.

另外,鏈接的樣式可以不同,具體取決于所處的狀態(tài).以下偽選擇器可用:

a:link 定義正常的為訪問鏈接的樣式

a:visited 定義訪問鏈接的樣式

a:active 一旦點擊鏈接,鏈接就會激活

a:hover 當(dāng)鼠標(biāo)懸停時,鏈接的樣式

下面的例子,創(chuàng)建一個鏈接,當(dāng)鼠標(biāo)移動到它上面的時候會改變樣式

html代碼:

css代碼:

a:hover{ color:red; }

執(zhí)行結(jié)果如下:

這是鼠標(biāo)移動到鏈接上時,顯示的樣式

當(dāng)為鏈接設(shè)置樣式時,必須遵守以下規(guī)則:

a:hover 必須在a:link和a:visited之后

a:active 必須在a:hover之后

默認(rèn)情況下,文本鏈接由瀏覽器加下劃線.

處理帶鏈接的文本,css最常見的用法之一是刪除下劃線.在下面的示例中,text-decoration屬性用于刪除下劃線.

html代碼:

<a class="text-decoration" href="https:www.sougou.com">我的下劃線已經(jīng)被刪除了!</a>

css代碼:

a.text-decoration:link{text-decoration:none;}

效果如下:

以下屬性用于控制鏈接的樣式:

border:none 從包含鏈接的圖像中刪除邊框

outline:none 刪除IE中點擊鏈接行上的虛線邊框

二 css自定義鼠標(biāo)光標(biāo)樣式

css允許你將鼠標(biāo)懸停在元素上時,設(shè)置所需的光標(biāo)樣式.例如,你可以將光標(biāo)更改為手形圖標(biāo),幫助圖標(biāo)等.而不是默認(rèn)的指針.

在下面的例子中,當(dāng)我們將鼠標(biāo)移動到span元素上時,鼠標(biāo)指針被設(shè)置為一個幫助圖標(biāo).(cursor就是光標(biāo)的意思)

需要幫忙么?

效果如下:

cursor屬性還有許多其他的值.例如:

default:默認(rèn)光標(biāo)

crosshair:光標(biāo)顯示為十字準(zhǔn)線

pointer:光標(biāo)顯示為手形圖標(biāo)

cursor的值比較多,用圖片顯示給大家:

通常改變鼠標(biāo)光標(biāo)的外觀,是為了提高網(wǎng)站訪問者的體驗.但是,選擇錯誤的光標(biāo)風(fēng)格也可能會引起誤解.

在線咨詢

上一篇：天降“大單”生意？小心暗藏“洗錢”陷阱！
下一篇：Firefox 83將默認(rèn)啟用Warp更新：大幅提升

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商