拖拽事件

最新推荐文章于 2023-12-04 09:27:43 发布

_左眼

最新推荐文章于 2023-12-04 09:27:43 发布

阅读量542

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/zql_csdn/article/details/81479577

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

-原生拖拽事件

DragEvent上传是html5的东东，对应的几个事件有

drag
dragend
dragenter
dragexit
dragleave
dragover
dragstart
drop

其中常用的有四个：dragenter、dragover、drop、dragend
分别对应的事件为：拖进、拖来拖去、释放鼠标、拖出

换成代码就长这样：

<span style="color:#000000"><code>document.addEventListener(<span style="color:#009900">"dragenter"</span>, <span style="color:#000088">function</span>( event ) {
    <span style="color:#000088">...</span>
}, false);
document.addEventListener(<span style="color:#009900">"dragover"</span>, <span style="color:#000088">function</span>( event ) {
    <span style="color:#000088">...</span>
}, false);
document.addEventListener(<span style="color:#009900">"drop"</span>, <span style="color:#000088">function</span>( event ) {
    event.preventDefault();//禁止浏览器默认行为
    <span style="color:#000088">...</span>
    <span style="color:#000088">return</span> false;//禁止浏览器默认行为
}, false);
document.addEventListener(<span style="color:#009900">"dragend"</span>, <span style="color:#000088">function</span>( event ) {
    <span style="color:#000088">...</span>
}, false);</code></span>