?

?

<divclass='dragged':index="$index"draggable='true'@dragstart="dragstart"@drag="drag"@dragend="dragend"</div>

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 &&currentTargetTop + currentTarget.offsetHeight + shadowDis <targetTop)return currentTargetIndex; if (currentTargetTop - shadowDis < targetTop + target.offsetHeight)return i; }}}},
}

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;}
}

總結

以上是生活随笔為你收集整理的【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。