Products
GG网络技术分享 2025-03-18 16:14 0
拖拽成为一项标准也是近几年的事，属于HTML5中的一部分，作为一种交互行为，拖拽是被广泛应用再界面软件中的，例如桌面应用，word、QQ软件都有拖拽行为。
在HTML5标准实施之前，拖拽也是被广泛使用的，web开发者将click、mouseover,mousemove组合起来实现拖拽逻辑，过程略显冗余和繁琐。
一言蔽之，HTML5的出现让拖拽开发变得简单
先来一张流程图
下图描绘了拖拽的流程.
要点概括总结
结合上图，我们梳理下知识点，做个拆分与解析。
一共有哪些事件
哪些实体可以被拖
draggable
wordContainerEle.onselectstart = event => false;
这意味着：
需要说明的是，一个元素被设置draggable之后，里面的文本就无法被选中了（chrome测试如此）。
关于放，有哪些限制？
拖放会冒泡嘛？
答案是肯定的。假设一个父元素包含一个子元素，理所当然地，用户拖子元素也是间接的拖动父元素的过程。
这篇文章主要介绍了JavaScript禁止右击保存图片,禁止拖拽图片的实现代码,代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
下面先看下js禁止右击保存图片。
禁止鼠标右键保存图片
| <img src=\"\" oncontextmenu=\"return false;\"> |
禁止鼠标拖动图片
| <img src=\"\" ondragstart=\"return false;\"> |
文字禁止鼠标选中
| <p onselectstart=\"return false;\">文字禁止鼠标选中</p> |
禁止复制文本
| <p onselect=\"document.selection.empty();\">文字禁止鼠标选中</p> |
jquery禁止文本复制和拷贝
| $(document).bind(\"contextmenu copy selectstart\", function() { return false; }); |
jquery禁止图片拖拽
| var img=$(\"img\"); img.on(\"contextmenu\",function(){return false;}); img.on(\"dragstart\",function(){return false;}); |
ps：js保存图片到手机相册
| /保存到相册 function savePic(){ var picurl= $(\"#picurl\").attr(\"src\"); //alert(picurl); savePicture(picurl); } |
| var triggerEvent = \"touchstart\"; function savePicture(Url){ var blob=new Blob([\'\'], {type:\'application/octet-stream\'}); var url = URL.createObjectURL(blob); var a = document.createElement(\'a\'); a.href = Url; a.download = Url.replace(/(.*\\/)*([^.]+.*)/ig,\"$2\").split(\"?\")[0]; var e = document.createEvent(\'MouseEvents\'); e.initMouseEvent(\'click\', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e); URL.revokeObjectURL(url); } |
到此这篇关于JavaScript禁止右击保存图片,禁止拖拽图片的实现代码的文章就介绍到这了,希望大家以后多多支持！
Demand feedback
