JavaScript实现文字与图片拖拽效果的方法


Posted in Javascript onFebruary 16, 2015

本文实例讲述了JavaScript实现文字与图片拖拽效果的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<title>JavaScript实现文字与图片的拖拽效果</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/skinslogo.gif"><br>图片可以拖动</div>

<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');"><a href="https://3water.com" 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 href='/site/js-5791-1.html' target='_blank'><u>浏览器</u></a>下拖动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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript与函数式编程解释
Apr 27 Javascript
Js动态创建div
Sep 25 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 #Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 #Javascript
js实现下拉框选择要显示图片的方法
Feb 16 #Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 #Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 #Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
JavaScript简介
Feb 15 #Javascript
You might like
怎样辨别一杯好咖啡
2021/03/03 新手入门
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php微信公众平台开发类实例
2015/04/01 PHP
PHP文件上传类实例详解
2016/04/08 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
详解Python的三种可变参数
2019/05/08 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
八年级音乐教学反思
2014/01/09 职场文书
食品流通安全承诺书
2014/05/22 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
横店影视城导游词
2015/02/06 职场文书
2015年清明节活动总结
2015/02/09 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2016年教师节慰问信
2015/12/01 职场文书