拖拽之網格吸附 放大縮小

最近專案中有這樣乙個需求：要求網格中每個塊拖拽的時候吸附網格，並且放大縮小相對位置不變，傳給後台的座標資訊也一致；

//自定義拖拽指令

vue.directive("drag",  else if (evv.clientx - (ev.clientx - ex * 0.4) >= (pw - cw) * 0.4) 
if (evv.clienty - (ev.clienty - ey * 0.4) <= 0)  else if (evv.clienty - (ev.clienty - ey * 0.4) >= (ph - ch) * 0.4) 
} else if (value.value.framebig == 2)  else if (evv.clientx - h >= pw - cw) 
if (evv.clienty - t <= 0)  else if (evv.clienty - t >= ph - ch) 
}}.bind(this);
document.onmouseup = function(e) ;
let prom = equipment.updatecabinetxy(params);
prom.then(
ret => {},
err => {}
);value.value.ifclick(false);
}settimeout(() => , 300);
}.bind(this);
};}});

2、在data中給了資料

3、吸附網格很簡單，思路：方格的定位值=移動了的距離/網格的寬度得到的整數部分*格仔的寬度

4、剛開始沒有相同怎麼去做放大縮小能相對保持不變，不想設定兩個尺寸再讓裡面的方塊根據相對位置移動，後來想到了css3的scale，可以在保持占用位置和真實大小不變的情況下等比放大縮小

5、但是滑鼠用scale在滑鼠拖拽的時候也得乘以或者除以相對應的比例，否則物體不會緊跟著滑鼠走

6、目前只是實現功能，**略顯冗雜，後期會優化更新

LayaAir拖拽移動物件並吸附 附原始碼

前言 拖拽移動物件是2d休閒小遊戲中常用的乙個功能，典型代表例如 植物大戰殭屍 中，種植植物的表現形式，拖拽植物卡片種植到相應的地點。今天介紹一下在laya專案中實現這一功能。該功能實現參照了 egret拖拽物件與吸附 思路 在 laya 中實現拖拽物件，需要用到mouse move事件的監聽，觸控...

自定義view，可拖拽進度和吸附效果的圓形進度條

前言 最近接到乙個需求，第一眼看到ui互動效果時，瞬間想對產品小哥說 尼瑪，這麼會玩，你咋不上天 確認了具體互動細節，喝了兩口農夫三拳，開始了兩耳不聞窗外事，一心只想擼 的過程。先上ui效果 說明 下面是整個自定義view的 public class roundprogressview extend...

js之拖拽事件

js之拖拽事件 api 拖拽事件是js原生的事件，使用時在div上新增draggable true 即可拖動該div 在拖動過程中，將激發多個事件，從而完成拖動 注意 1.瀏覽器塊 div等 預設禁止拖拽事件的拖放操作，所以若想監聽drop操作，需要在dragover中阻止元素發生預設的行為，然後就...