dragstart&dragover&drop 拖放图片到区域

墨蓝 2023-07-12 03:57 17阅读 0赞

知识点：

*  dragstart事件：当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。
 *  dragover事件： 当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)；这个事件在可被放置元素的节点上触发。
 *  drop 事件：当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出。

<img src="./img/flower.jpg" width="159" height="150" alt="" id="img0">
    <div id="div0"></div>
    <div id="div1"></div>
    <script> var img=document.querySelector("img"); var div0=document.querySelector("#div0"); var div1=document.querySelector("#div1"); img.draggable=true;//可抓取，为false则不可抓取 img.addEventListener("dragstart",dragHandler); function dragHandler(e){ // console.log(e); if(e.type==="dragstart"){ // e.dataTransfer.setDragImage(img,0,0); e.dataTransfer.setData("Text",this.id); div0.addEventListener("dragover",dragHandler); div1.addEventListener("dragover",dragHandler); div0.addEventListener("drop",dragHandler); div1.addEventListener("drop",dragHandler); // 鼠标下面有图片logo ，新建一个小图片 // var imgele=new Image(); // imgele.src="./img/1.png"; // e.dataTransfer.setDragImage(imgele,10,10);//拖动的时候有图标显示 }else if(e.type==="dragover"){ // console.log(e); e.preventDefault(); }else if(e.type==="drop"){ this.appendChild(document.getElementById(e.dataTransfer.getData("Text"))); } } </script>

![在这里插入图片描述][2020030700230468.gif]

--------------------

看了一些给我帮助的博客：  
[关于HTML实现拖放时出现禁止图标的解决方案][HTML]  
[深入理解javascript原生拖放][javascript]  
[Disable dragging an image from an HTML page][]  
[HTML5 拖放（Drag 和 Drop）详解与实例][HTML5 _Drag _ Drop]

[2020030700230468.gif]: https://img-blog.csdnimg.cn/2020030700230468.gif
[HTML]: https://www.cnblogs.com/wcrBlog/p/6856524.html
[javascript]: https://www.cnblogs.com/xiaohuochai/p/5886618.html
[Disable dragging an image from an HTML page]: https://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-page
[HTML5 _Drag _ Drop]: https://www.cnblogs.com/moqiutao/p/6365113.html