JavaScript實現(xiàn)文字與圖片拖拽效果的方法

更新時間：2015年02月16日 12:03:30 作者：代碼家園

這篇文章主要介紹了JavaScript實現(xiàn)文字與圖片拖拽效果的方法,涉及javascript操作文字與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)文字與圖片拖拽效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<html>

<head>

<title>JavaScript實現(xiàn)文字與圖片的拖拽效果</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="http://www.dhdzp.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)) {/* 多元素拖動需要恢復(fù)上次元素狀態(tài) */

    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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

Js+Flash實現(xiàn)訪問剪切板操作
最近需要遇到了這個問題點擊按鈕復(fù)制鏈接的功能果斷度娘谷哥,最后找到得解決方案ZeroClipBoard一款開源得js+Flash實現(xiàn)得剪切板操作
2012-11-11
去除圖像或鏈接黑眼圈的兩種方法總結(jié)
去除圖像或鏈接黑眼圈的兩種方法總結(jié)...
2007-06-06
js電信網(wǎng)通雙線自動選擇技巧
網(wǎng)站打開的速度快是相當重要的baidu.com不管你是用的什么網(wǎng)絡(luò)，都打開的很快
2008-11-11
使用post方法實現(xiàn)json往返傳輸數(shù)據(jù)的方法
今天小編就為大家分享一篇關(guān)于使用post方法實現(xiàn)json往返傳輸數(shù)據(jù)的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-03-03
如何判斷微信內(nèi)置瀏覽器(通過User Agent實現(xiàn))
在進行微信公眾賬號開發(fā)的時候，需要知道當前的瀏覽器是微信內(nèi)置的瀏覽器，那么如何判斷呢？這是就只有通過瀏覽器的User Agent來進行判斷了
2014-09-09
JS實現(xiàn)讓網(wǎng)頁背景圖片斜向移動的方法
這篇文章主要介紹了JS實現(xiàn)讓網(wǎng)頁背景圖片斜向移動的方法,涉及javascript操作背景圖片特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
JS幻想讀取二進制文件
如果說讓JavaScript讀取站點上一文本文件,那不過是個再簡單不了的事了；但若說要換成一個二進制的文件，并且是完全靜態(tài)的讀取,那似乎有點天方夜譚了。
2009-04-04
學(xué)習JavaScript設(shè)計模式之中介者模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的中介者模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript中的動態(tài)?import()用法示例解析
這篇文章主要為大家介紹了JavaScript中的動態(tài)import()用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
Bootstrap幻燈片輪播圖支持觸屏左右手勢滑動的實現(xiàn)方法
最近在研究用bootstrap搭建網(wǎng)站，Bootstrap能自適應(yīng)pc端和手機端，并且移動設(shè)備優(yōu)先，適合現(xiàn)如今移動營銷，大家用的設(shè)備基本是觸屏的了，能用滑動交互在小屏幕上體驗會更好，那么如何實現(xiàn)呢？下面小編給大家介紹下bootstrap 手勢滑動輪播圖的實現(xiàn)方法
2016-10-10