一 效果图展示与粗略讲解
(示例原文:HTMLElement:drag 事件 - Web API 接口参考 | MDN)
先上一波效果图,图中可以看出把带“有白色背景的div元素”进行了拖动,且拖动过程中如果鼠标指针不在“下方紫色区域”范围内,鼠标的光标状态为“禁用”。
在“下方紫色区域”范围内,光标即为正常状态的原因是此范围的div元素添加了dragover事件,没有添加此事件的范围均为光标“禁用”状态
二 如何实现上方的效果(示例图中颜色变化未实现,对整个拖拽事件来说不主要)
说完了上面效果图的的特点,具体来说怎么实现,HTML5规范了一个元素属性draggable,除图片与链接元素以外,此属性在任何元素上默认都为false。但是如果要实现拖动效果,这个属性是必不可少的。先上代码
HTML代码部分
<div class="dropzone">
<div id="draggable" draggable=&#