<html>
<head>
<title>文字与图片被拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
.tips{position:absolute;background:#eee;}
</style>
</head>
<body>
<div class="tips" id="tips1" onmouseover="dragF.drag('tips1');">
<img src="/images/logo.gif">拖动图片</div>
<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');"><a href="http://www.codefans.net" target="_blank">链接</a><br /> 拖动链接也可以
</div>
</body>
<script type="text/javascript">
var $id=function(id){return document.getElementById(id);}
var dragF={
locked:false,
lastObj:undefined,
drag:function(obj){
$id(obj).onmousedown=function(e){
var e = e ? e : window.event;
if(!window.event) {e.preventDefault();}/* 阻止标注浏览器下拖动a,img的默认事件 */
dragF.locked=true;
$id(obj).style.position="absolute";
$id(obj).style.zIndex="100";
if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {/* 多元素拖动时候需要恢复上一次元素的状态 */
dragF.lastObj.style.zIndex = "1";
}
dragF.lastObj=$id(obj);
var tempX=$id(obj).offsetLeft;
var tempY=$id(obj).offsetTop;
dragF.x=e.clientX;
dragF.y=e.clientY;
document.onmousemove=function(e){
var e = e ? e : window.event;
if(dragF.locked==false) return false;
$id(obj).style.left=tempX+e.clientX-dragF.x+"px";
$id(obj).style.top=tempY+e.clientY-dragF.y+"px";
if(window.event) {e.returnValue=false;}/* 阻止ie下a,img的默认事件 */
}
document.onmouseup=function(){
dragF.locked=false;
}
}
}
}
</script>
</html>
分享到：
相关推荐
2. **添加图片**：启动软件后，用户可以通过点击界面中的“添加文件”按钮，或者直接拖曳图片到软件的工作区域。软件支持多种图片格式，如JPG、PNG、BMP等。 3. **开始转换**：图片添加完成后，用户只需点击主界面...
使用拖曳功能来确定文字在图片上的精确位置。确保文字不会遮挡动态图的重要部分，并且视觉上平衡。 6. **保存修改**： 最后，确认所有的编辑都满意后，点击“完成”或“保存”按钮。根据所使用的应用程序，你可能...
通常，这需要编写一个处理图片上传的后端接口，接收前端上传的图片数据，并返回上传成功后的图片URL。在前端，我们可以配置Vue Quill Editor的`image`模块，使其能够调用这个接口，将本地图片文件转化为URL并插入到...
1. **高识别率与速度**：软件采用了先进的OCR技术，确保即使面对复杂的文本格式也能实现高准确度的文字识别，并且识别过程迅速。 2. **批量处理能力**：支持一次性处理多个文件，大大提升了工作效率。 3. **多样化的...
* 图片文字识别：捷速扫描文字识别软件可以对图片上的文字进行识别，快速提取文字信息。 * PDF文件识别：捷速扫描文字识别软件可以对PDF文件上的文字进行识别，快速提取文字信息。 捷速扫描文字识别软件是一款功能...
标题中的"easy_dragtogo拖曳手势"是一个Firefox浏览器扩展，专为提升用户在浏览网页时的交互体验而设计。这个扩展允许用户通过简单的拖放手势来执行各种操作，从而提高浏览效率。在火狐浏览器上，这样的工具往往受到...
11.示范如何拖曳文字 12.示范如何拖曳图片 13.示范如休拖曳文件 14.在两个列表间来加拖放项目 15.如何在TreeView之间来回拖放节点 16.示范如何利用公有属性来使窗体全局化. 17.示范如何传送窗体 18.示范如何访问另一...
如果图像大小不符合需求，你可以通过以下两种方法进行调整：一是单击选中图片，然后在四周的选择框上拖曳鼠标，这样会保持图片的原始宽高比进行缩放；二是右键点击图片，选择“对象属性”，在“图片框”对话框的...
1. **基础知识**：在教学设计中，基础是理解如何通过拖曳图像来合并图片，这是进行图像编辑和合成的基本操作。学生需要学会如何在PS环境中导入图片，并将它们放置在合适的位置，以便于后期的编辑和设计。 2. **初级...
当你在处理图片的时候，是否偶尔需要把文字叠在上面？这种应用称为「为照片加上说明文字」，下面我们就来介绍一种可以让你迅速地在照片上加注文字说明的方法——使用Movavi Photo Editor。 如何使用 Movavi Photo ...
天音批量加水印大师可批量修改文件的扩展名，给图片添加边框、图片和文字水印等功能，这样处理后的数码照片、产品展示图片可以最大限度防止盗用，同时也起到标识图片的功能。 天音批量加水印大师软件的主要特色 可...
第20章 图文验证与图片处理技术 770 20.1 网站常用验证码大全 771 实例514 绘制纯数字的网站验证码 771 实例515 绘制数字与字母组合的验证码 772 ...实例543 使用AJAX可调整大小控件拖曳图片 调大小 823
图片编辑：提供图片加框、调整大小、亮度、对比及滤镜等效果，也可以在图片上加入文字泡泡、绘图等功能。 批次转换：可将大量图片批次作修改。 版型功能：内建版型可将多张图片整合在同一张图片里呈现。 拼贴功能...
批量加水印大师，可批量修改文件的扩展名，给图片添加边框、图片和文字水印等功能，这样处理后的数码照片、产品展示图片可以最大限度防止盗用，同时也起到标识图片的功能。 软件的主要特色： 可用于大量图片添加...
然后，打开照片和风景图片，并将其分别拖曳到新的文档中。 接下来，使用选择工具选择照片中的特定区域，然后使用图像层将其与风景图片合成。可以使用图像层的不透明度和Blend Mode等属性来调整图像的透明度和混合...
从描述部分，我们知道这个弹出层可以是包含文字的，也可以是包含图片的。也就是说，这可以根据实际需要来灵活使用。代码示例中，通过点击id为"testClick"和"testClick1"的按钮来触发弹出层的显示。这种用法对于实现...
网页设计的主要工作包括记录客户的要求与意向、向客户索取网站必要文字及图片素材、根据素材、客户意向及客户同行类的网站首页设计出首页效果图等。 二、Photoshop设计网页效果图的步骤 使用Photoshop软件设计网页...
在本文中，我们将深入探讨如何使用Visual C++与RichEdit控件实现一个强大的文本编辑器，该编辑器支持TXT文件的处理、图像文件的拖放功能以及自定义的文字拖曳操作。RichEdit编辑器是Windows应用程序开发中常用的一个...
基于七牛API及Plupload开发的前端JavaScript SDK 本SDK适用于IE8 、Chrome、Firefox、... watermark （文字、图片水印） pipeline （管道，可对imageView2、imageMogr2、watermark进行链式处理） 标签：qiniu
2. 对象：用户可以从工具箱中选择合适的对象，例如文字、图片、声音等，将其拖曳到时间轴上，E-Prime就会依据时间轴的顺序，呈现出这些对象。 3. 属性编辑窗口：在属性编辑窗口中，用户可以编辑对象的基本属性，例如...