手摸手教你擼乙個可拖拽元件（附原始碼）

業務需求

1、 實現乙個可以全頁面可以拖拽的元件

2、順帶介紹一下vue-draggable外掛程式，可以實現多個元件之間的拖動

這個元件我是借用的vue的directive自定義指令的方式實現的，如果對vue的自定義指令還是不很熟悉的話可以先去官網了解一波，當然熟悉的童鞋也可以不用vue自定義指令來實現

export default

else})
()dialogheaderel.onmousedown =
(e)=
>
else
document.onmousemove =
function
(e)else
if(left > maxdragdomleft)if(
-(top)
> mindragdomtop)
else
if(top > maxdragdomtop)
// 移動當前元素
dragdom.style.csstext += `;left:$px;top:$px;`
// emit ondrag event
// vnode.child.$emit('dragdialog')
} document.onmouseup =
function
(e)}
}}

="el-dialog"

>
="el-dialog__header"
>我是可拖拽元件<
/div>
<
/slot>
<
/div>
<
/div>
<
/template>
import dragable from "@/common/directive/dragable"
;// 引入指令js檔案
export default
,// 註冊指令
data()
;}};
<
/script>3、在頁面中使用元件, **如下：
乙個vue的可拖拽的瀑布流布局元件
vue grid layout是乙個功能強大的瀑布流布局元件。支援使用者拖拽和對改變元素大小，並提供相應的事件進行自定義操作。而且布局可以儲存和再展現。通過npm安裝 npm install vue grid layout這是乙個使用的例子 var testlayout var gridlayout...
動手教你擼乙個iOS顏色拾取器
結束使用cgcontext進行顏色的拾取能夠節省記憶體的使用 cgcontext對管理的具體使用後期來專講一下 獲取uiimageview中的uiimage 拾取座標的轉換 利用bitmapinfo來獲取uiimage的rgb分布 利用cgcontext獲取目標畫素的分布值 輸出對應位置的顏色值 f...
老司機教你用原生JDK 擼乙個 MVC 框架！！！
其實 spring mvc 是乙個基於請求驅動的 web 框架，並且也使用了前端控制器模式來進行設計，再根據請求對映規則分發給相應的頁面控制器進行處理，具體工作原理見下圖。在這裡，就不詳細談相關的原理和實現細節了，感興趣的話，可以讀一下這方面的書籍。我在網上看到一篇不錯的關於講述怎麼實現乙個 mvc...