天津滨海新区天气预报,seo简单优化,陕西网渭南站,手机壳在线设计网站MENU vue2html5原生dom原生JavaScript实现跨区域拖放vue2实现跨区域拖放vue2mousedown实现全屏拖动#xff0c;全屏投掷vue3element-plusvuedraggable实现图片上传拖拽排序vue2transition-group实现拖动排序原生拖拽排序 vue2html5原生dom原生JavaScript实现跨区域拖放
关键代… MENU vue2html5原生dom原生JavaScript实现跨区域拖放vue2实现跨区域拖放vue2mousedown实现全屏拖动全屏投掷vue3element-plusvuedraggable实现图片上传拖拽排序vue2transition-group实现拖动排序原生拖拽排序 vue2html5原生dom原生JavaScript实现跨区域拖放
关键代码
// 放
function drop(ev) {let data ev.dataTransfer.getData(Text),i ev.path[1].getAttribute(i),text document.getElementById(data).cloneNode(true).innerText.trim();if (i null) return alert(请放置在文件名上);if (app.fileS[i].divs.includes(text)) return alert(不能放重复数据);app.fileS[i].divs.push(text);for (let is 0; is app.fileS.length; is) {if (i is) {app.fileS[is].isShow true;} else {app.fileS[is].isShow false;}}
}完整代码 gitee(码云) - mj01分支 - copyDragAndDrop 文件 vue2实现跨区域拖放
关键代码
dragend(item) {console.log(item);if (this.oldItem ! this.newItem) {let oldIndex this.List.indexOf(this.oldItem);let newIndex this.List.indexOf(this.newItem);let oldflag falselet newflag falseif (oldIndex -1) {oldflag trueoldIndex this.list.indexOf(this.oldItem);}if (newIndex -1) {newflag truenewIndex this.list.indexOf(this.newItem);}let newList [...this.List]; // 中间数组用于交换两个节点let newlist [...this.list]; // 中间数组用于交换两个节点if (!oldflag) {newList.splice(oldIndex, 1);} else {newlist.splice(oldIndex, 1);}if (!newflag) {newList.splice(newIndex, 0, this.oldItem);} else {newlist.splice(newIndex, 0, this.oldItem);}// 删除老的节点// newList.splice(oldIndex, 1);// // 在列表目标位置增加新的节点// newList.splice(newIndex, 0, this.oldItem);// // 更新this.List触发transition-group的动画效果this.List [...newList];this.list [...newlist];}
}完整代码 gitee(码云) - mj01分支 - dragAndDrop 文件 vue2mousedown实现全屏拖动全屏投掷
html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title鼠标滑动/titlelink relstylesheet href./index.css
/headbodydiv idappdiv classctn ctn1div classsub sub1 v-for(site, index) in list1div classdragCtn fixed mousedownmousedown(site, $event)mousemove.preventmousemove(site, $event) mouseupmouseup(site, $event){{ site.name }}/div/div/divdiv classctn ctn2div classsub sub2 v-for(site, index) in list2div classdragCtn{{ index }} : {{ site.name }}/div/div/div/divscript src/node_modules/vue/dist/vue.js/scriptscript src./index.js/script
/body/htmlJavaScript
new Vue({el: #app,data: {list1: [{ name: 拖动我, index: 0 }],list2: [{ name: a, index: 0 }, { name: b, index: 1 }, { name: c, index: 2 }, { name: d, index: 3 }],vm: ,sb_bkx: 0,sb_bky: 0,is_moving: false},methods: {mousedown: function (site, event) {var startx event.x;var starty event.y;this.sb_bkx startx - event.target.offsetLeft;this.sb_bky starty - event.target.offsetTop;this.is_moving true;},mousemove: function (site, event) {var endx event.x - this.sb_bkx;var endy event.y - this.sb_bky;var _this thisif (this.is_moving) {event.target.style.left endx px;event.target.style.top endy px;}},mouseup: function (e) {this.is_moving false;}}
});css
.ctn {line-height: 50px;cursor: pointer;font-size: 20px;text-align: center;float: left;
}.sub:hover {background: #e6dcdc;color: white;width: 100px;
}.ctn1 {border: 1px solid green;width: 100px;
}.ctn2 {border: 1px solid black;width: 100px;margin-left: 50px;
}.fixed {width: 100px;height: 100px;position: fixed;background: red;left: 10px;top: 10px;cursor: move;
}vue3element-plusvuedraggable实现图片上传拖拽排序
前言 安装对应的vuedraggable组件 npm install vuedraggable4.1.0 --save package.json文件中记录对应的版本号为: vuedraggable: 4.1.0这里要注意咯克隆项目的时候这里的4.1.0可能会变为^4.1.0一定要改为4.1.0如果不是可以先卸载然后安装正确的版本即可。 如果版本不对会报错并且不能运行。 本案例基于若依vue3前后端分离项目做二次开发 若依自带二次封装element-plus图片上传组件但是没有实现拖拽排序功能。 于是又自己封装了一个ImageUploadDraggable图片上传组件此组件基于若依自带的图片上传组件的基础上进行再次封装。 组件正常引入即可可以全局引入或局部引入引入方式跟我们自定的组件一样。 html
el-form-item label图片 classws_nimage-upload-draggable v-modeldialogForm.images :limit5/image-upload-draggable
/el-form-itemJavaScript
let info reactive({dialogForm: {// 图片images: []}}),{dialogForm} toRefs(info);二次封装上传组件
templatediv classcomponent-upload-imageul classel-upload-list el-upload-list--picture-cardvue-draggable-next v-modelfileListli v-for(item, index) in fileList :keyitem.index classel-upload-list__item is-success animatedimg :srcitem.url alt classel-upload-list__item-thumbnail /i classel-icon-close/ispan classel-upload-list__item-actions!-- 预览 --span classel-upload-list__item-preview clickhandlePictureCardPreviewFileDetail(item)el-iconzoom-in/zoom-in/el-icon/span!-- 删除 --span classel-upload-list__item-delete clickhandleRemoveFileDetail(index)el-icondelete/delete/el-icon/span/span/li/vue-draggable-next/ulel-upload multiple :actionuploadImgUrl list-typepicture-card :on-successhandleUploadSuccess:before-uploadhandleBeforeUpload :limitlimit :on-errorhandleUploadError :on-exceedhandleExceedrefimageUpload :show-file-listfalse :headersheaders :class{ hide: fileList.length limit }el-icon classavatar-uploader-iconplus //el-icon/el-upload!-- 上传提示 --div classel-upload__tip v-ifshowTip请上传template v-iffileSize大小不超过b stylecolor: #f56c6c{{ fileSize }}MB/b/templatetemplate v-iffileType格式为b stylecolor: #f56c6c{{ fileType.join(/) }}/b/template的文件/divel-dialog v-modeldialogVisible title预览 width800px append-to-bodyimg :srcdialogImageUrl styledisplay: block; max-width: 100%; margin: 0 auto //el-dialog/div
/templatescript setup
import { VueDraggableNext } from vue-draggable-next;
import { getToken } from /utils/auth;const props defineProps({modelValue: [String, Object, Array],// 图片数量限制limit: {type: Number,default: 5,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如[png, jpg, jpeg]fileType: {type: Array,default: () [png, jpg, jpeg],},// 是否显示提示isShowTip: {type: Boolean,default: true,},
});const { proxy } getCurrentInstance();
const emit defineEmits();
const number ref(0);
const uploadList ref([]);
const dialogImageUrl ref();
const dialogVisible ref(false);
const baseUrl import.meta.env.VITE_APP_BASE_API;
// 上传的图片服务器地址
const uploadImgUrl ref(import.meta.env.VITE_APP_BASE_API /file/upload);
const headers ref({Authorization: Bearer getToken(),appid: import.meta.env.VITE_APP_ID,
});
const fileList ref([]);
const showTip computed(() props.isShowTip (props.fileType || props.fileSize)
);watch(() props.modelValue,(val) {if (val) {// 首先将值转为数组const list Array.isArray(val) ? val : props.modelValue.split(,);// 然后将数组转为对象数组fileList.value list.map((item) {if (typeof item string) {item { name: item, url: item };}return item;});} else {fileList.value [];return [];}},{ deep: true, immediate: true }
);// 上传前loading加载
function handleBeforeUpload(file) {let isImg false;if (props.fileType.length) {let fileExtension ;if (file.name.lastIndexOf(.) -1) {fileExtension file.name.slice(file.name.lastIndexOf(.) 1);}isImg props.fileType.some((type) {if (file.type.indexOf(type) -1) return true;if (fileExtension fileExtension.indexOf(type) -1) return true;return false;});} else {isImg file.type.indexOf(image) -1;}if (!isImg) {proxy.$modal.msgError(文件格式不正确, 请上传${props.fileType.join(/)}图片格式文件!);return false;}if (props.fileSize) {const isLt file.size / 1024 / 1024 props.fileSize;if (!isLt) {proxy.$modal.msgError(上传头像图片大小不能超过 ${props.fileSize} MB!);return false;}}proxy.$modal.loading(正在上传图片请稍候...);number.value;
}// 文件个数超出
function handleExceed() {proxy.$modal.msgError(上传文件数量不能超过 ${props.limit} 个!);
}// 上传成功回调
function handleUploadSuccess(res, file) {if (res.code 0) {uploadList.value.push({ name: res.data.url, url: res.data.url });uploadedSuccessfully();} else {number.value--;proxy.$modal.closeLoading();proxy.$modal.msgError(res.msg);proxy.$refs.imageUpload.handleRemove(file);uploadedSuccessfully();}
}function handlePictureCardPreviewFileDetail(file) {dialogImageUrl.value file.url;dialogVisible.value true;
}// 删除
function handleRemoveFileDetail(index) {fileList.value.splice(index, 1);
}// 上传结束处理
function uploadedSuccessfully() {if (number.value 0 uploadList.value.length number.value) {fileList.value fileList.value.filter((f) f.url ! undefined).concat(uploadList.value);uploadList.value [];number.value 0;emit(update:modelValue, listToString(fileList.value));proxy.$modal.closeLoading();}
}
// 上传失败
function handleUploadError() {proxy.$modal.msgError(上传图片失败);proxy.$modal.closeLoading();
}// 对象转成指定字符串分隔
function listToString(list, separator) {let strs ;separator separator || ,;for (let i in list) {if (undefined ! list[i].url list[i].url.indexOf(blob:) ! 0) {strs list[i].url.replace(baseUrl, ) separator;}}return strs ! ? strs.substr(0, strs.length - 1) : ;
}
/scriptstyle scoped langscss
// .el-upload--picture-card 控制加号部分
:deep(.hide .el-upload--picture-card) {display: none;
}
/stylevue2transition-group实现拖动排序
html
transition-group idapp namedrog taguldiv draggabletrue v-for(item, index) in lists dragstartdragStart($event, index) dragoverallowDrop dropdrop($event, index) v-bind:keyitem{{item}}/div
/transition-groupJavaScript
new Vue({el: #app,data: {lists: [1: apple, 2: banana, 3: orange, 4: melon]},methods: {// 取消默认行为allowDrop(e){e.preventDefault();},// 开始拖动dragStart(e, index){let tar e.target;e.dataTransfer.setData(Text, index);if (tar.tagName.toLowerCase() li) {// console.log(drag start)// console.log(drag Index: index)}},// 放置drop(e, index){this.allowDrop(e);// console.log(drop index: index);//使用一个新数组重新排序后赋给原变量let arr this.lists.concat([]),dragIndex e.dataTransfer.getData(Text);temp arr.splice(dragIndex, 1);arr.splice(index, 0, temp[0]);// console.log(sort);this.lists arr;}}
});原生拖拽排序
html
ul ididUlli classm_36 ta_c bc_87ceeb fs_681/lili classm_36 ta_c bc_87ceeb fs_682/lili classm_36 ta_c bc_87ceeb fs_683/lili classm_36 ta_c bc_87ceeb fs_684/lili classm_36 ta_c bc_87ceeb fs_685/li
/ulJavaScript
(function () {let ulList document.querySelector(#idUl),liList document.querySelectorAll(li),currentLi undefined;liList.forEach(item item.draggable true);ulList.addEventListener(dragstart, (e) {e.dataTransfer.effectAllowed move;currentLi e.target;setTimeout(() currentLi.classList.add(bc_transparent color_transparent), 0);});ulList.addEventListener(dragenter, (e) {e.preventDefault();if (e.target currentLi || e.target ulList) return false;let liArray Array.from(ulList.childNodes),currentIndex liArray.indexOf(currentLi),targetindex liArray.indexOf(e.target)if (currentIndex targetindex) {ulList.insertBefore(currentLi, e.target.nextElementSibling);} else {ulList.insertBefore(currentLi, e.target);}});ulList.addEventListener(dragover, (e) e.preventDefault());ulList.addEventListener(dragend, (e) currentLi.classList.remove(bc_transparent color_transparent));
})();
