北京一家专门做会所的网站,竞价账户托管公司哪家好,学科建设的网站,wordpress pot 汉化由于Vue3文档缺失#xff0c;示例10也是也跑不起来#xff0c;这边参考示例改动了一下。 改动的点主要是this指向、$children相关的问题 在Vue3中移除了$children可以使用$ref替代 参考文章#xff1a;计算坐标方法重写、文档示例
关键点#xff1a;计算中的子组件取值使用…由于Vue3文档缺失示例10也是也跑不起来这边参考示例改动了一下。 改动的点主要是this指向、$children相关的问题 在Vue3中移除了$children可以使用$ref替代 参考文章计算坐标方法重写、文档示例
关键点计算中的子组件取值使用ref绑定即可 对于循环的Dom树可以参考模板引用 完整代码 templatediv classuser-canvas dragenter.prevent dragover.preventdiv idcontent classw-full pb-16grid-layoutclassmin-h-screenrefgridlayout:layout.syncgridConfig.layout:col-num60:row-height30:is-draggabledraggable gridConfig.configType ! 2:is-resizableresizable gridConfig.configType ! 2:vertical-compactfalse:use-css-transformstrue!-- grid-item classh-full relative z-50 :x0 :y2 :w12 :h2 is1--!-- /grid-item--grid-itemrefgridItemRefsv-foritem in gridConfig.layoutclassh-full select-none relative overflow-hidden:staticitem.static:xitem.x:yitem.y:witem.w:hitem.h:iitem.i:minW8:minH2div{{item.key}}/div/grid-item/grid-layout/div/div/templateimport { ref, onUnmounted } from vue// refconst gridlayout ref(null)const gridItemRefs ref([])// 计算坐标用let mouseXY { x: null, y: null }let DragPos { x: null, y: null, w: 4, h: 4, i: null }const gridConfig {layout:[{x: 0,y: 3,w: 4,h: 12,i: 1,static: true,moved: false}]}const handleDrop (event) {event.preventDefault()// TODO}// 开始拖动const drag (e) {let parentRect document.getElementById(content).getBoundingClientRect()let mouseInGrid falseif (mouseXY.x parentRect.left mouseXY.x parentRect.right mouseXY.y parentRect.top mouseXY.y parentRect.bottom) {mouseInGrid true}if (mouseInGrid true gridConfig.layout.findIndex((item) item.i drop) -1) {gridConfig.layout.push({x: (gridConfig.layout.length * 2) % 12,y: gridConfig.layout.length 12, // puts it at the bottomw: gridConfig.dragType?.w || 4,h: gridConfig.dragType?.h || 4,i: drop})}let index gridConfig.layout.findIndex((item) item.i drop)if (index ! -1) {try {gridItemRefs.value[gridConfig.layout.length - 1].$refs.item.style.display none} catch {}let el gridItemRefs.value[index]// el.dragging { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }let new_pos calcXY(el, mouseXY.y - parentRect.top, mouseXY.x - parentRect.left, 1, 1)if (mouseInGrid true) {// 红色游标部分gridlayout.value.dragEvent(dragstart,drop,new_pos.x,new_pos.y,gridConfig.dragType?.h || 4,gridConfig.dragType?.w || 4)DragPos.i String(index)DragPos.x gridConfig.layout[index].xDragPos.y gridConfig.layout[index].y}if (mouseInGrid false) {gridlayout.value.dragEvent(dragend, drop, new_pos.x, new_pos.y, 1, 1)gridConfig.layout gridConfig.layout.filter((obj) obj.i ! drop)}}}// 释放拖动const dragend (e) {let parentRect document.getElementById(content).getBoundingClientRect()let mouseInGrid falseif (mouseXY.x parentRect.left mouseXY.x parentRect.right mouseXY.y parentRect.top mouseXY.y parentRect.bottom) {mouseInGrid true}if (mouseInGrid true) {gridlayout.value.dragEvent(dragend, drop, DragPos.x, DragPos.y, 1, 1)gridConfig.addGridItem(DragPos)gridConfig.layout gridConfig.layout.filter((obj) obj.i ! drop)}gridItemRefs.value[gridConfig.layout.length - 1].$refs.item.style.display none}// 计算坐标const calcXY (el, top, left, width, height) {const colWidth el.calcColWidth()let x Math.round((left - 10) / (colWidth 10))let y Math.round((top - 10) / (el.rowHeight 10))const _width width || el.innerWconst _height height || el.innerHx Math.max(Math.min(x, el.cols - _width), 0)y Math.max(Math.min(y, el.maxRows - _height), 0)return { x, y }}// 加载完成后监听鼠标事件onMounted(() {document.addEventListener(dragover,function (e) {mouseXY.x e.clientXmouseXY.y e.clientY},false)})// 销毁时关闭监听onUnmounted(() {document.removeEventListener(dragover,function (e) {mouseXY.x nullmouseXY.y null},false)})
