describe
In the project, we may need to implement draggable requirements for some elements, which happen to be developed with Vue. Vue has a very useful thing called custom instructions. After thinking about it later, this function can be made into a custom command, which element you want to use, just bind it, which is convenient, simple and clear. As for the following traversal registration, it is very simple, it is a forEach loop, which makes our code more concise, because there may be more than one custom instruction defined in our project, so it is also a small optimization.
Before reading, you can also look at the custom directive of the official document
https://cn.vuejs.org/v2/guide/custom-directive.html
Effect
Let’s take a look at the effect picture first, and realize the drag and drop function. Because there is a size limit for uploading GIF images, only one side of the limit is demonstrated, but in fact all four sides are beyond the limit.
the code
First, create a new utils folder and create a directive.js file in it. Put our custom directives in this file.
The logic of implementing the drag command is also relatively simple. First, we record the initial position of the element in the touchstart event, and then monitor the position of our finger in the touchmove, and dynamically change the top and left values of the element to realize the element Moved with our fingers. Finally, add a judgment so that the element cannot exceed the scope of our screen.
export default {
//这个是自动获取焦点，拿过来展示循环注册自定义指令的
focus: {
inserted: function(el) {
// 聚焦元素
el.focus()
}
},
//拖拽指令
drag: {
//这个el就是我们绑定的那个元素
inserted: function(el) {
// 页面可用高度
let pageHeight = window.screen.availHeight
let pageWidth = window.screen.availWidth
// 初始位置
let touchstartX = 0
let touchstartY = 0
// 元素的宽高的一半
let elWidth = el.clientWidth / 2
let elHeight = el.clientHeight / 2
el.style.position = 'fixed'
el.addEventListener('touchstart', function(e) {
// 相对于可视区域的位置,记录最开始的位置
touchstartX = e.targetTouches[0].clientX
touchstartY = e.targetTouches[0].clientY
})
el.addEventListener('touchmove', function(e) {
// 相对于可视区域的位置
let newTouchstartX = e.targetTouches[0].clientX
let newTouchstartY = e.targetTouches[0].clientY
//这里也可以判断的更精细点，我这里处理的比较粗糙
if (newTouchstartX > elWidth && newTouchstartY > elHeight && newTouchstartY <= pageHeight - elHeight && newTouchstartX <= pageWidth - elWidth) {
el.style.left = touchstartX + (newTouchstartX - touchstartX) - elWidth + 'px';
el.style.top = touchstartY + (newTouchstartY - touchstartY) - elHeight + 'px';
}
})
}
}
}
After writing our custom command, it is registered. I directly register the global custom command. In the main.js file, import the written js file and cycle through it. At this point our operation is over.
import directive from './utils/directive'
Object.keys(directive).forEach(key => {
Vue.directive(key, directive[key]);
});
If you use it, just use it v-focusdirectlyv-drag
<input v-focus type="text" name="" id="">
<div v-drag></div>
After writing, dragging did not cause page scrolling events, so I did not prohibit page scrolling.
If you want to prohibit it, Vue provides some properties. @touchmove.prevent
.prevent is an event modifier in VUE, which is used to prevent the default event, which is equivalent to event.preventDefault()
The personal level is limited. If you have any questions, please leave a message for guidance. It is only for learning and reference.
There is no limit to learning! Work hard, encourage each other!