拖曳元素（二）
JS 有一个 Drag and Drop API，它提供了丰富的拖曳操作接口，本例仅使用当中的 dragover 和 dragend 事件便可实现在父元素内拖曳子元素的功能。代码如下：
<style>
#wrap2 {
margin: 30px auto;
position: relative;
width: 600px;
height: 300px;
border: 1px solid gray;
}
#box2 {
position: absolute;
width: 100px;
height: 50px;
background: lightblue;
display: grid;
place-items: center;
}
#mypic {
left: 120px;
position: absolute;
width: 142px;
height: 132px;
}
</style>
<div id="wrap2">
<div id="box2" draggable="true">拖曳我</div>
<img id="mypic" src="https://638183.freep.cn/638183/small/hxxb.webp" title="拖曳我" alt="" />
</div>
<script>
const dragElms = [box2, mypic]; //待拖曳元素 : 两个
//父元素监听拖曳经过事件 : 取消默认行为（出现禁止放下图标）
wrap2.ondragover = (e) => e.preventDefault();
//子元素监听 drag* 事件
dragElms.forEach(elm => {
//监听dragend拖曳结束事件 : 计算left和top值并安置子元素
elm.ondragend = (e) => {
let rect = wrap2.getBoundingClientRect(); //获得父元素属性值对象
let _x = e.clientX - rect.left - elm.offsetWidth / 2, /* 计算子元素X坐标值 */
_y = e.clientY - rect.top - elm.offsetHeight / 2; /* 计算子元素Y坐标值 */
//下面条件判断语句用于放置越界
if(_x < 0) _x = 0;
if(_x > rect.width - elm.offsetWidth) _x = rect.width - elm.offsetWidth;
if(_y < 0) _y = 0;
if(_y > rect.height - elm.offsetHeight) _y = rect.height - elm.offsetHeight;
//定位子元素
elm.style.cssText += `
left: ${_x}px;
top: ${_y}px;
`;
};
});
</script>
需要注意的是：img标签、超链标签、纯文本节点等默认支持可拖曳，凡默认不支持的，需要在HTML标签代码中加入 draggable="true" 属性设置。
前一篇: 拖曳元素（一）
下一篇: js+svg绘制动画六边形
发表评论:
评论列表 [2条]
#2 | 悄然 于 2024-9-6 19:07 发布: 这个拖曳互动性趣味性都很强。。。难不成我首页上的那池水也可以四处拖动？不给范围的话，想想挺好玩
#1 | 小希 于 2024-9-6 19:05 发布: [box2, mypic]这个可以设两个拖动的子元素，且有范围限定，不可越界。。拖曳是个新的东东，未尝试过。。默认图片和文本。。。常用的就是视频不默认喽。。。哈哈，能整个小视频拖着到处走么。。
