`
zjq_blog
  • 浏览: 49937 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html 中img标签中的图片拖拽和选中

    博客分类：
  • JS
HTML浏览器 
阅读更多
问题描述：
打开两个窗口，或者一个子窗口，或者一个浮动的div。top中包含图片，使用鼠标将top中的图片拖拽到parent中。window的history会记住这个连接。浏览器默认的允许拖拽，可以使用ondragstart="return false;"取消拖拽。
例如：
1，test_img2.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
  function showImg(){
    window.open("test_img.html");
  }
</script>
<body>
<input type="button" value="showImg" onclick="showImg()" />
</body>
</html>
2,test_img.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<img src="IMG_1806.JPG" width="100" height="100" ondragstart="return false;"  />
</body>
</html>
onselectstart="return   false;"页面内容无法选中  
ondragstart="return   false;"   页面内容无法脱拽  
onhelp="return   false;"   取消F1的帮助功能  
oncontextmenu="return   false;"   取消右键菜单
分享到：
| orcale的分页语句
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    可做拼图游戏的鼠标拖拽图片更换位置js代码

    在这个文件中，我们可能会看到`&lt;img&gt;`标签用于展示图片，以及可能存在的`&lt;div&gt;`元素作为图片的容器，用于实现拖拽效果。`img`目录则包含所有用于游戏的图片资源，这些图片会被引用到`index.html`中。 接着，`js`...

    HTML鼠标拖拽旋转立方体效果源码.rar

    源码使用DIV+SPAN+IMG图片标签实现页面基本布局，使用CSS属性实现页面元素尺寸设置及美化，使用的属性包括：宽高、背景图片、背景尺寸、绝对相对定位、3D环境渲染、旋转、平移、选中页面元素等。且使用原生js代码...

    jquery鼠标拖拽图片

    在HTML文件中，通过`&lt;script&gt;`标签将jQuery库链接到你的页面，通常从CDN（内容分发网络）获取是最便捷的方式： ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ``` 接下来，我们...

    HTML许愿墙代码

    这些图片可以使用HTML的`&lt;img&gt;`标签引入，通过`src`属性指定图片路径。 总的来说，HTML许愿墙代码的实现涉及HTML结构的构建、JavaScript动态数据加载和交互逻辑，以及CSS样式控制，三者结合以提供一个富有交互性和...

    jquery上传图片并显示，支持拖拽上传

    在这个例子中，HTML可能包含一个用于选择文件的`&lt;input type="file"&gt;`元素，以及一个预览图片的`&lt;div&gt;`或`&lt;img&gt;`标签。 2. **CSS样式**：虽然未提供具体的CSS文件，但在实现拖拽上传和图片预览时，通常会用到CSS来...

    jQuery选择或拖拽批量上传文件插件

    预览图片功能涉及到图像处理，插件可能使用HTML5的`FileReader` API读取文件内容并转换为数据URL，然后将这些URL设置为`&lt;img&gt;`标签的`src`属性，实现图片的即时预览。同时，插件还会显示文件的基本信息，如文件名、...

    jQuery+Layer.js创建标签插件.zip

    5. **图片资源**：`img`目录下的图片文件可能是弹出层或者标签页中的图标，例如关闭按钮、切换按钮等。在CSS中正确引用这些资源，可以提升用户体验。 6. **字体资源**：`fonts`目录可能包含自定义字体文件，用于...

    JS鼠标拖拽图片切换代码

    在HTML中，我们可以创建多个`&lt;img&gt;`标签来存放图片，通过CSS将这些图片定位在一个堆叠的布局中，通常会设置一定的透明度和Z轴顺序，使得部分图片可见，部分图片被遮挡。JS则负责监听鼠标的移动和点击事件，以实现...

    浏览器预览图片功能

    在网页中，图片通常是通过`&lt;img&gt;`标签来加载的，其`src`属性指向图片的URL。当浏览器解析到`&lt;img&gt;`标签时，它会发起一个HTTP请求来获取图片数据，并将其渲染到页面上。然而，为了实现预览功能，我们不能简单地立即...

    JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

    在HTML中，我们可以为`&lt;img&gt;`标签添加一个`oncontextmenu`事件处理器，当用户尝试右键点击图片时，返回`false`以阻止默认的右键菜单弹出： ```html &lt;img src="" oncontextmenu="return false;"&gt; ``` 这样，用户就...

    由html5实现的文件上传预览功能--zyUpload

    它提供了`FileReader`对象，通过`readAsDataURL`方法将文件内容转换为数据URL，这个URL可以直接插入到`&lt;img&gt;`标签的`src`属性中，实现图片的预览。 2. **拖放API**：HTML5的拖放API使得用户可以通过拖拽操作来移动...

    支持图片预览上传代码.rar_progressp1s_上传图片_支持图片预览上传代码

    当用户选择图片后，可以使用`readAsDataURL`方法读取文件内容，并将其转换为数据URL，然后插入到HTML元素（如`&lt;img&gt;`标签）的`src`属性中，从而在页面上显示预览图像。 2. **图片放大查看**：为了方便用户查看图片...

    图片上传和预览

    在网页开发中，图片上传和预览功能是用户交互中不可或缺的一部分，尤其在社交媒体、电商网站及各种在线表单中尤为常见。这个源码着重解决了在不同浏览器间，包括老旧的Internet Explorer（IE）和Firefox等，实现图片...

    jQuery多张图片上传预览代码.zip

    当用户选择图片后，我们可以获取到选中的File对象，并利用HTML5的File API来读取图片内容，创建一个data-URI，最后将这个URI设置为一个`&lt;img&gt;`标签的`src`属性，从而在页面上显示预览图像。 接着，CSS在这个过程中...

    计算机复习选择题(附有答案).docx

    4. **HTML图像对齐属性**：`&lt;img&gt;`标签的`align`属性用于设置图像的对齐方式，`align="left"`表示图像向左对齐。 5. **HTML列表类型**：`&lt;ol&gt;`标签用于创建一个有序列表，即标有数字的列表。 6. **Dreamweaver插入...

    网页制作Dreamweaver客观题.docx

    以上知识点涵盖了Dreamweaver中的一些基本概念和操作，包括框架、HTML标签、CSS样式、脚本处理、页面属性、表单以及表格等，这些都是网页制作中的核心要素。熟练掌握这些知识点，能有效提升在Dreamweaver中制作网页...

    EAM资产管理网制作D选择题吐血上吊加强版页.pdf

    2. **框架大小调整**：在Dreamweaver中，如果不想让用户在浏览器中调整框架大小，可以在框架属性面板中选中“不能调整大小”。 3. **框架数量**：一个有3个框架的Web页包含4个HTML文件，即每个框架一个文件，加上主...

    jsp网页开发常用代码

    `onselectstart="return false"`和`oncopy="document.selection.empty()"`分别用来禁止文本选中和复制。 ### 2. 隐藏IE6中的图片边框 对于老旧浏览器如IE6，可以通过以下代码隐藏图片的边框： ```html &lt;img src=...

    网页设计课程设计

    - **题目**：设置固定网页背景图片的效果，需要在标签检查器面板中设置哪个属性？ - **答案**：C.fixed - **解析**：要使背景图片固定不动，即随着滚动条的滚动而不移动，需要将`background-attachment`属性值设...

    javascript仿pc端微信界面

    `images`文件夹包含了项目所需的图像资源，如微信的图标、背景图片等，它们可以通过CSS背景属性或者HTML的&lt;img&gt;标签引入到页面中。 `README.md`文件是项目的说明文档，通常包含项目介绍、安装指南、使用方法和贡献...

Magicbox
Global site tag (gtag.js) - Google Analytics