编程 Javascript

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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js select常用操作控制代码

Mar 16 Javascript

Jquery颜色选择器ColorPicker实现代码

Nov 14 Javascript

使用jquery写个更改表格行顺序的小功能

Apr 29 Javascript

Js数组排序函数sort()介绍

Jun 08 Javascript

初识Javascript小结

Jul 16 Javascript

jQuery.cookie.js实现记录最近浏览过的商品功能示例

Jan 23 Javascript

基于JS实现限时抢购倒计时间表代码

May 09 Javascript

windows下更新npm和node的方法

Nov 30 Javascript

详解如何制作并发布一个vue的组件的npm包

Nov 10 Javascript

vue中的ref和$refs的使用

Nov 22 Javascript

JS实现简易留言板增删功能

Feb 08 Javascript

Jquery使用each函数实现遍历及数组处理

Jul 14 jQuery

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