首页 > 【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有�

【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有�

 

 

HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动，图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false。

[注意] Angular下必须设置draggable='true'才能生效，只设置draggable不起作用

methods: {// VUE解决拖拽、排序问题----------------------------------------------------------------// 开始拖拽dragstart(event) {var target = event.target;var event = event || window.event; //兼容IE浏览器// 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离target.diffX = event.clientX - target.offsetLeft;target.diffY = event.clientY - target.offsetTop;},//拖拽中…drag(event) {var target = event.target;target.setAttribute("dragging", "true"); //拖拽过程变成虚线的样子var event = event || window.event;var x = event.clientX - target.diffX;var y = event.clientY - target.diffY;if (x < 0) {x = 0;} else if (x > innerWidth - target.offsetWidth) {x = innerWidth - target.offsetWidth;}if (y < 0) {y = 0;} else if (y > innerHeight - target.offsetHeight) {y = innerHeight - target.offsetHeight;}target.style.left = x + "px"; //左右拖拽target.style.top = y + "px"; //上下拖拽},//拖拽结束dragend(event) {var target = event.target;target.removeAttribute("dragging"); //取消虚线样式var currentIndex = parseInt(target.getAttribute("index")); //被移动的索引var targetIndex = this.getSortSequenceBlockIndex(target); //即将移动到的索引this.$g.array.jumpQueue([被拖拽的doms数组], currentIndex, targetIndex); //插队},// ---------------------------------------------------------------- // 获取将会被插入的sequence的block顺序getSortSequenceBlockIndex(currentTarget) {var shadowDis = 10; //阴影间距var arr = [被拖拽的doms数组];var currentTargetIndex = parseInt(currentTarget.getAttribute("index"));var currentTargetTop = parseInt(currentTarget.style.top);for (var i = 0, len = arr.length; i < len; i++) {var target  = arr[i];if (target) {var targetTop = parseInt(target.style.top);if (currentTarget != target) {if (currentTargetIndex === i - 1 &¤tTargetTop + currentTarget.offsetHeight + shadowDis 
div.dragged { /*禁止选中文本*/-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;cursor: grab !important;&:active {z-index: 1;cursor: grabbing !important;opacity: .618;}&[dragging] {background: white !important;border: 1px dashed gray !important;color: gray !important;opacity: 0.9 !important;transform: translate(-3px, -3px);box-shadow: 5px 10px 0 rgba(0, 0, 0, 0.05);}&[animate] {transition: 0.618s ease;}
}

更多相关：

©2024 11GX.COM