西安知名网站推广,wordpress 全局广告,h5页面怎么做,怎么用手机做抖音上最火的表白网站因为项目有rem适配#xff0c;使用第三方插件无法处理适配问题#xff0c;所有只能自己写拖拽功能了 拖拽一般都会想到按下#xff0c;移动#xff0c;放开#xff0c;但是本人亲测#xff0c;就在div绑定一个按下事件就行了#xff08;在事件里面写另外两个事件#x… 因为项目有rem适配使用第三方插件无法处理适配问题所有只能自己写拖拽功能了 拖拽一般都会想到按下移动放开但是本人亲测就在div绑定一个按下事件就行了在事件里面写另外两个事件另外两个绑上会莫名其妙卡死那种莫名其妙的问题 推荐几个开发调试时使用的第三方拖动插件吧虽然没用上但是他们是真的好vue-drag-resize和vuedraggable其中前者更轻量化后者功能更全
主要功能
效果图
界面就是大的父盒子包着几个小盒子盒子里面有图片和文字 div classrange idrange refrangedivclassiconItemv-for(item, index) in pointList:keyindexmousedown.stop.prevent.nativemousedown($event, item):style{left: item.dx px,top: item.dy px,z-index: item.zIndex,}!--mousemove.stop.prevent.nativemousemove($event, item)mouseup.stop.prevent.nativemouseup($event, item)--imgdraggablefalse:srctypeList[item.type].src:alttypeList[item.type].name item.EName/span{{ typeList[item.type].name item.EName }}/span/div/div逻辑
script setup langts
import { ref, reactive, watch, computed, Ref } from vue;
import { mapPunctuation } from /utils/youran;
let rem ref(0.005208); // 10/1920 做好功能给上面的left top乘上去就行了 left: item.dx * rem pxconst range: Ref ref(null);// 这里只是把存在文件里的base64图片文件取出来
let typeList reactive([{type: 1,src: ,name: 球机-摄像头,},{type: 2,src: ,name: 抢机-摄像头,},{type: 3,src: ,name: 无源打卡设备,},{type: 4,src: ,name: 无源打卡设备,},{type: 5,src: ,name: 反向控制,},
]);typeList.forEach((item, index) {item.src mapPunctuation[index].src;
});let pointList ref([{fId: 111,type: 1,EId: ,EName: ,dx: 0,dy: 0,zIndex: 2,},
]);// 鼠标事件
let downType ref(false);
let disX 0;
let disY 0;
let odiv: any null;
let mousedown (e: any, item: any) {downType.value true;console.log(按下事件);odiv e.target;disX e.clientX - odiv.offsetLeft;disY e.clientY - odiv.offsetTop;document.onmousemove (e) {console.log(移动事件);//计算元素位置(需要判断临界值)let left e.clientX - disX;let top e.clientY - disY;let { offsetHeight: pondModelHeight, offsetWidth: pondModelWidth } range.value;let { offsetHeight: sonNodeHeight, offsetWidth: sonNodeWidth } odiv;// 左上角(left)if (left 0) {left 0;}if (top 0) {top 0;}// 左下角if (top pondModelHeight - sonNodeHeight) {top pondModelHeight - sonNodeHeight;}if (left pondModelWidth - sonNodeWidth) {left pondModelWidth - sonNodeWidth;}item.dx left;item.dy top;item.zIndex 999;};document.onmouseup (e) {console.log(放开事件);document.onmousemove null;document.onmouseup null;item.zIndex 1;odiv null;};
};
/scriptcss本来不该放出来但是我在这里踩坑了觉得其他人也会img图片有默认的拖拽很难禁止所以拿一个伪元素直接放在img上面不给点img就不会踩坑 .range {width: 960px;height: 540px;background-color: pink;position: relative;.iconItem {position: absolute;left: 10px;top: 10px;z-index: 2;display: flex;align-items: center;cursor: move;user-select: none;width: 32px;height: 32px;background: yellow;img {width: 32px;height: 32px;}// 关键::before {content: ;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 3;}:hover {// span {// display: block;// }}span {display: none;font-size: 12px;font-family: YouSheBiaoTiHei;color: red;}}}完整代码建议按照上面的一点点复制吧有几个文件是外部的base64图片
templatediv classPastureMapdiv classmapContentdiv classmapBoxdiv classrange idrange refrangedivclassiconItemv-for(item, index) in pointList:keyindexmousedown.stop.prevent.nativemousedown($event, item):style{left: item.dx px,top: item.dy px,z-index: item.zIndex,}!--mousemove.stop.prevent.nativemousemove($event, item)mouseup.stop.prevent.nativemouseup($event, item)--imgdraggablefalse:srctypeList[item.type].src:alttypeList[item.type].name item.EName/span{{ typeList[item.type].name item.EName }}/span/div/div/divdiv classoperationPaneldiv classaddIConCarddiv classtitlespan新增图标/span/divdiv classboxdiv classbgImgdiv classleftspan背景图/span/divdiv classrightbutton选择图片/buttonspan建议尺寸960*540/span/div/divdiv classiconBtnFormdiv classcelldiv classleftspan圈舍/span/divdiv classrightinput typetext placeholder请选择圈舍 //div/divdiv classcelldiv classleftspan设备编号/span/divdiv classrightinput typetext placeholder请输入设备编号 //div/divdiv classcelldiv classleftspan类型/span/divdiv classrightinput typetext placeholder请选择类型 //div/div/divdiv classaddBtnbutton新增/button/div/div/divdiv classiconListdiv classitem v-for(item, index) in pointList :keyindexdiv classleftspan类型/span/divdiv classrightinput typetext placeholder名称 //divdiv classdelimg src altdel //div/div/div/div/div/div
/templatescript setup langts
import { ref, reactive, watch, computed, Ref } from vue;
import { mapPunctuation } from /utils/youran;
let rem ref(0.005208); // 10/1920const range: Ref ref(null);
let typeList reactive([{type: 1,src: ,name: 球机-摄像头,},{type: 2,src: ,name: 抢机-摄像头,},{type: 3,src: ,name: 无源打卡设备,},{type: 4,src: ,name: 无源打卡设备,},{type: 5,src: ,name: 反向控制,},
]);typeList.forEach((item, index) {item.src mapPunctuation[index].src;
});let pointList ref([{fId: 111,type: 1,EId: ,EName: ,dx: 0,dy: 0,zIndex: 2,},
]);// 鼠标事件
let downType ref(false);
let disX 0;
let disY 0;
let odiv: any null;
let mousedown (e: any, item: any) {downType.value true;console.log(按下事件);odiv e.target;disX e.clientX - odiv.offsetLeft;disY e.clientY - odiv.offsetTop;document.onmousemove (e) {console.log(移动事件);//计算元素位置(需要判断临界值)let left e.clientX - disX;let top e.clientY - disY;let { offsetHeight: pondModelHeight, offsetWidth: pondModelWidth } range.value;let { offsetHeight: sonNodeHeight, offsetWidth: sonNodeWidth } odiv;// 左上角(left)if (left 0) {left 0;}if (top 0) {top 0;}// 左下角if (top pondModelHeight - sonNodeHeight) {top pondModelHeight - sonNodeHeight;}if (left pondModelWidth - sonNodeWidth) {left pondModelWidth - sonNodeWidth;}item.dx left;item.dy top;item.zIndex 999;};document.onmouseup (e) {console.log(放开事件);document.onmousemove null;document.onmouseup null;item.zIndex 1;odiv null;};
};
/scriptstyle langless scoped
.PastureMap {height: 100%;.mapContent {display: flex;height: 100%;.mapBox {flex: 1;height: 100%;.range {width: 960px;height: 540px;background-color: pink;position: relative;.iconItem {position: absolute;left: 10px;top: 10px;z-index: 2;display: flex;align-items: center;cursor: move;user-select: none;width: 32px;height: 32px;background: yellow;img {width: 32px;height: 32px;}::before {content: ;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 3;}:hover {// span {// display: block;// }}span {display: none;font-size: 12px;font-family: YouSheBiaoTiHei;color: red;}}}}.operationPanel {width: 270px;.addIConCard {.title {span {}}.box {.bgImg {display: flex;align-items: center;.left {}.right {}}.iconBtnForm {.cell {display: flex;align-items: center;.left {span {}}.right {input {}}}}}}.iconList {.item {display: flex;align-items: center;position: relative;.left {span {}}.right {input {}}.del {position: absolute;top: 0;right: 0;}}}}}
}
/style
