js user-drag
时间: 2023-05-17 10:02:58 浏览: 84
"js user-drag" 是一个 CSS 属性,它可以控制元素是否可以被用户拖动。如果设置为 "none",则元素不能被拖动;如果设置为 "element",则元素可以被拖动。这个属性通常用于制作可拖动的 UI 元素,比如拖拽排序、拖拽调整大小等。
相关问题
// draggable.js import { onMounted, onBeforeUnmount } from 'vue' export default { mounted(el) { console.log('el',el) el.setAttribute('draggable', true) let startX, startY, initialLeft, initialTop, currentX, currentY const onDragStart = (e) => { console.log('e',e.preventDefault()) e.stopPropagation() // e.preventDefault() startX = e.clientX || e.touches[0].clientX startY = e.clientY || e.touches[0].clientY initialLeft = el.offsetLeft initialTop = el.offsetTop el.classList.add('dragging') } const onDrag = (e) => { e.stopPropagation() currentX = (e.clientX || e.touches[0].clientX) - startX currentY = (e.clientY || e.touches[0].clientY) - startY el.style.left = `${initialLeft + currentX}px` el.style.top = `${initialTop + currentY}px` } const onDragEnd = (e) => { e.stopPropagation() el.classList.remove('dragging') } el.addEventListener('dragstart', onDragStart) el.addEventListener('drag', onDrag) el.addEventListener('dragend', onDragEnd) el.addEventListener('touchstart', onDragStart) el.addEventListener('touchmove', onDrag) el.addEventListener('touchend', onDragEnd) onMounted(() => { el.classList.add('draggable') }) onBeforeUnmount(() => { el.removeEventListener('dragstart', onDragStart) el.removeEventListener('drag', onDrag) el.removeEventListener('dragend', onDragEnd) el.removeEventListener('touchstart', onDragStart) el.removeEventListener('touchmove', onDrag) el.removeEventListener('touchend', onDragEnd) el.classList.remove('draggable') el.classList.remove('dragging') }) } } 为什么拖拽时会出现虚影,残影, 怎么解决这个问题
出现拖拽时的虚影、残影问题,是因为浏览器默认会在拖拽时添加一个半透明的影像,以便用户可以清楚地看到拖拽的对象和目标位置。这个影像在拖拽结束后会自动消失。
您可以尝试在dragstart事件中调用setData方法来阻止浏览器默认的影像行为,例如:
```
const onDragStart = (e) => {
e.stopPropagation();
e.dataTransfer.setData('text/plain', ''); // 阻止浏览器默认影像
startX = e.clientX || e.touches[0].clientX;
startY = e.clientY || e.touches[0].clientY;
initialLeft = el.offsetLeft;
initialTop = el.offsetTop;
el.classList.add('dragging');
};
```
此外,您还可以在CSS中使用`-webkit-user-drag: none;`来阻止元素的默认拖拽效果,例如:
```
.draggable {
-webkit-user-drag: none;
user-select: none;
}
```
请注意,这种方法可能会影响到元素的交互性,因此需要谨慎使用。
ng-file-upload
ng-file-upload is a module for AngularJS that makes it easy to upload files to a web server. It provides a user-friendly interface for selecting files, as well as progress bars and other visual feedback to help users track the progress of their uploads.
With ng-file-upload, developers can easily add file upload functionality to their AngularJS applications without having to write a lot of custom code. The module also supports drag-and-drop file uploads and allows developers to customize the file selection dialog with CSS.
One of the main advantages of ng-file-upload is that it works with a variety of backend technologies, including PHP, Node.js, and .NET. This means that developers can use the module to build file upload features for virtually any web application.
Overall, ng-file-upload is a powerful and flexible module that makes it easy to add file upload functionality to AngularJS applications. Whether you're building a simple file upload form or a complex file management system, ng-file-upload can help you get the job done quickly and easily.