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 动态设置已知select的option的value值的代码
Dec 16 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js常用排序实现代码
Dec 28 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
Javascript自定义事件详解
Jan 13 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
JS为什么说async/await是generator的语法糖详解
Jul 11 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
php str_replace的替换漏洞
2008/03/15 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python中的并发编程实例
2014/07/07 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
使用Python实现简单的服务器功能
2017/08/25 Python
django使用LDAP验证的方法示例
2018/12/10 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
群众路线教育实践活动总结
2014/10/30 职场文书
财务工作失职检讨书
2014/11/21 职场文书
文明倡议书
2015/01/19 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
python如何利用traceback获取详细的异常信息
2021/06/05 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript