jquery實現(xiàn)簡單的拖拽效果實例兼容所有主流瀏覽器(優(yōu)化篇)

更新時間：2013年06月28日 18:01:53 作者：

相對于上一篇，優(yōu)化了拖拽的效果，具體的代碼及截圖如下，感興趣的朋友可以參考下哈，希望對大家有所幫助

相對于上一篇，優(yōu)化了拖拽的效果。
js代碼:fun.js

 
_MoveObj = null;//全部變量，用來表示當前div 
z_index = 0;//z方向 
jQuery.fn.myDrag=function(){ 
_IsMove = 0; //是否移動 1.移動 
_MouseLeft = 0; //div left坐標 
_MouseTop = 0; //div top坐標 
$(document).bind("mousemove",function(e){ 
if(_IsMove==1){ 
$(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); 
} 
}).bind("mouseup",function(){ 
_IsMove=0; 
$(_MoveObj).removeClass("downMouse"); 
}); 
return $(this).bind("mousedown",function(e){ 
_IsMove=1; 
_MoveObj = this; 
var offset =$(this).offset(); 
_MouseLeft = e.pageX - offset.left; 
_MouseTop = e.pageY - offset.top; 
z_index++; 
_MoveObj.style.zIndex=z_index; 
$(_MoveObj).addClass("downMouse"); 
}); 
} 

html代碼:

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>demo.htm</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="myFun.js" type="text/javascript"></script> 
<style type="text/css"> 
.myDiv{ 
background:#EAEAEA; 
width: 100px; 
height: 100px; 
border: 1px solid; 
cursor: pointer; 
text-align: center; 
line-height: 100px; 
} 
.downMouse{ 
cursor:move; 
filter:alpha(Opacity=80); 
-moz-opacity:0.5; 
opacity: 0.5; 
background-color:#ffffff; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$(".myDiv").myDrag(); 
//$("#myDiv2").myDrag(); 
}) 
</script> 
</head> 
<body> 
<div id="myDiv1" class="myDiv">拖拽1</div> 
<div id="myDiv2" class="myDiv">拖拽2</div> 
<div id="myDiv3" class="myDiv">拖拽3</div> 
<div id="myDiv4" class="myDiv">拖拽4</div> 
<div id="myDiv5" class="myDiv">拖拽5</div> 
<div id="myDiv6" class="myDiv">拖拽6</div> 
<div id="show"></div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

JQuery中層次選擇器用法實例詳解
這篇文章主要介紹了JQuery中層次選擇器用法,以實例形式較為詳細的分析了jQuery中層次選擇器的各種常見使用技巧,并備有較為詳細的注釋說明,需要的朋友可以參考下
2015-05-05
jquery實現(xiàn)簡易的移動端驗證表單
本文給大家匯總介紹了幾個常用的jquery實現(xiàn)簡易的移動端驗證表單，非常的實用，有需要的小伙伴可以進來參考下。
2015-11-11
封裝了jQuery的Ajax請求全局配置
這篇文章主要介紹了封裝了jQuery的Ajax請求全局配置的相關(guān)資料,需要的朋友可以參考下
2015-02-02
深入分析jquery解析json數(shù)據(jù)
這篇文章主要深入分析jquery解析json數(shù)據(jù)的方法，非常的詳盡,需要的朋友可以參考下
2014-12-12
jQuery中empty()方法用法實例
這篇文章主要介紹了jQuery中empty()方法用法,以實例形式分析了empty()方法的功能、定義及將匹配元素中的所有內(nèi)容移除的使用技巧,需要的朋友可以參考下
2015-01-01
推薦一款jQuery插件模板
這篇文章主要給大家推薦一款jQuery插件模板，這是本人最喜歡的一款了，原因很簡單，使用方便，可選擇性也比較多。有需要的小伙伴參考下吧
2015-01-01
Jquery樹插件zTree實現(xiàn)菜單樹
這篇文章主要為大家詳細介紹了Jquery樹插件zTree實現(xiàn)菜單樹，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞
jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞，鼠標懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動，實現(xiàn)的代碼如下，需要的朋友可以看看
2014-08-08
教你一步步用jQyery實現(xiàn)輪播器
相信大家應(yīng)該都會看到在各大網(wǎng)站上都有一個輪播器的效果，于是自己不禁也想做一個，查了資料，看了輪播器的原理，慢慢的試著做了做，最終效果勉勉強強，但還是想總結(jié)出來，或許對有需要的朋友們帶來一定的幫助，下面來一起看看吧。
2016-12-12
jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
暫時沒有想到什么好的解決辦法，我現(xiàn)在加了個瀏覽器判斷非ie的話就注冊blur事件，這樣有個問題就是blur實在別的控件活動焦點的時候，txtStation控件注冊的方法是為了填充它緊挨著的一個下拉列表
2010-08-08