简介
- draggable 是HTML5 中新的全局属性.规定是否允许用户拖动元素。
- 兼容性: 不支持IE11 以下, 不支持很多安卓手机浏览器 不适合H5端开发
文档
- Web Api: Document-Darg
- HTML attribute draggable
- 适应于元素拖拽到另一个元素里面 较大范围的拖拽.
实战
- 拖拽时在左上角增加一个图标 只能拖拽图标 否则存在定位不准的问题 也是下一个优化点
- 使用 node.getBoundingClientRect() 获取元素的坐标
- 使用 clientX clientY 获取元素相对于整个浏览器的坐标
- 3,4数据相减 达到获取真正的偏移量
export const dragEventList = (setOtherProps, otherProps) => {
let draggedRef = null;
document.addEventListener(
'dragstart',
function(event) {
// 保存拖动元素的引用(ref.)
draggedRef = event.target;
event.target.style.opacity = 0.5;
},
false,
);
document.addEventListener(
'dragend',
(event) => {
// 重置透明度
event.target.style.opacity = '';
},
false,
);
/* 放下目标节点时触发事件 */
document.addEventListener(
'dragover',
(event) => {
// 阻止默认动作
event.preventDefault();
},
false,
);
document.addEventListener(
'drop',
(event) => {
// 阻止默认动作(如打开一些元素的链接)
event.preventDefault();
// 将拖动的元素到所选择的放置目标节点中
let infoClientRect = document.getElementById('dropZone').getBoundingClientRect();
let leftNew = Math.ceil(event.clientX - infoClientRect.left);
let topNew = Math.ceil(event.clientY - infoClientRect.top);
if(leftNew < 0 || leftNew > infoClientRect.width || topNew < 0 || topNew > infoClientRect.height){
console.log('拖拽到了图片区域外部,不能进行拖拽');
return false;
}
let key = draggedRef?.dataset?.mes || draggedRef?.parentNode?.dataset?.mes;
let item = otherProps.signConfig.find((g) => {
return g.key === key;
});
if(!item){
return false;
}
item.x = leftNew;
item.y = topNew;
setOtherProps({
...otherProps,
signConfig: otherProps.signConfig,
})
draggedRef.style.left = leftNew; // `${left}px`;
draggedRef.style.top = topNew; // `${top}px`;
return true;
},
false,
);
}
参考资料: https://mp.weixin.qq.com/s/Hc3rufhCsMhgzsea1XPiVQ