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

时间：2021-04-28 08:04:48|栏目：JavaScript代码|点击：次

本文实例讲述了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://www.jb51.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 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代码

下一篇：JavaScript错误处理和堆栈追踪详解

本文标题：JavaScript实现文字与图片拖拽效果的方法

本文地址：http://www.codeinn.net/misctech/110218.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程