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