1.跨瀏覽器,主流瀏覽器都可以運行
2.純javascript開發。
3.配置實用方便。
4.二次開發簡單,易用。
傳送門 線上試玩
成品預覽
用一張圖片用座標的方式產生拼圖儲存格,類似css sprite。大致思路是,每個儲存格有對應的兩個索引,由資料驅動顯示。建立執行個體時吧0-9亂序排列,每個儲存格對應兩個索引,一個是真實所在位置的索引,一個是記錄現在位置的索引。拖動圖片的時調整記錄現在位置的索引,去對比原始數組如果值相等,那麼就可以確定拼圖完成。
1.亂序排列[0-9]的數組產生一個新數組,來產生拼圖儲存格的排序。為了避免產生不符合需求的數組,比較然後遞迴。
indicator.fn.unordered = function (array) { //亂序排列 array=array || [0,1,2,3,4,5,6,7,8,9]; if (({}).toString.call(array).indexOf('Array') === -1) return; var arr = [], value = array.toString(); arr = array.sort(function () { return Math.random() > 0.5 ? -1 : 1; }); (arr.toString() === value) && arguments.callee(array); return arr;};
2.主要痛點在於拖拽時即時去檢測現在儲存格與其他儲存格的位置關係,判斷拖動的儲存格是不是進入其他儲存格而不是在自己的佔位儲存格。如果不符合要求,則把拖拽元素放回原始位置。
indicator.fn.checkPosition=function(e){ //檢查儲存格位置,符合條件插入 不符合條件放回原處 e=that.getEvent(e); var i=that.htmls.length,size=null,pointer = [e.clientX,e.clientY]; for(;i--;){size=that.getClinetRect(that.htmls[i]);if(size.top < pointer[1] && size.bottom>pointer[1]){ if(size.left<pointer[0] && size.right>pointer[0]){that.htmls[i]===indicator.currentTarget || that.replaceElement(that.htmls[i]); }else{ that.restore(); }} }};
3.為了避免拖拽元素時導致儲存格產生的重新排列導致的錯位,所以要產生一個佔位儲存格,這佔位的儲存格複製自拖拽儲存格。
indicator.fn.createPlaceholder=function(T){ var node=T.cloneNode(true); node.innerHTML=''; node.style.display='none'; node.className='placeholder'; T.parentNode.insertBefore(node,T); that.placeholder=node;};
4.界定拖拽儲存格是否進入其他儲存格,左頂點大於目前的儲存格的top,left但是小於目前的儲存格的bottom,right
indicator.fn.checkPosition=function(e){ //檢查儲存格位置,符合條件插入 不符合條件放回原處 e=that.getEvent(e); var i=that.htmls.length,size=null,pointer = [e.clientX,e.clientY]; for(;i--;){ size=that.getClinetRect(that.htmls[i]); if(size.top < pointer[1] && size.bottom>pointer[1]){ if(size.left<pointer[0] && size.right>pointer[0]){ that.htmls[i]===indicator.currentTarget || that.replaceElement(that.htmls[i]); }else{ that.restore(); } } }};
5.調整儲存格時,要改變拖拽單元個的兩個記錄位置的屬性,還要改變目前的儲存格的兩個位置屬性,再調整記錄位置的數組
這裡的處理我覺得也是最繁複最有挑戰的地方,修改了很久
indicator.fn.replaceElement=function(targetNode){ //擺放單元至正確位置 var current=indicator.currentTarget,k1=that.htmls,k2=that.sn,temp,j=0,k=0,a1=[-1,-1],a2=null,a3=-1,arr=[],parent=that.parent.children[0],li; current.style.position='static'; that.index=[]; for(;k<k1.length;k++){if(targetNode===that.htmls[k]) {a1[0]=k;} if(current===that.htmls[k]) {a1[1]=k;} }a1.sort(); a2=k1[a1[0]]; k1[a1[0]]=k1[a1[1]]; k1[a1[1]]=a2; a3=k2[a1[0]]; k2[a1[0]]=k2[a1[1]]; k2[a1[1]]=a3; parent.innerHTML='';for(;j<k1.length;j++){li=that.htmls[j];that.index.push(that.htmls[j].index);try{parent.appendChild(li)}catch(e){}} };
6.在釋放滑鼠時,檢查原始數組和記錄位置數組的值十分相等,確定是不是拼圖完成。
that.index.join('')===that.sn.sort().join('')