jquery實(shí)現(xiàn)簡(jiǎn)單的拖拽效果實(shí)例兼容所有主流瀏覽器(優(yōu)化篇)
js代碼:fun.js
_MoveObj = null;//全部變量,用來(lái)表示當(dāng)前div
z_index = 0;//z方向
jQuery.fn.myDrag=function(){
_IsMove = 0; //是否移動(dòng) 1.移動(dòng)
_MouseLeft = 0; //div left坐標(biāo)
_MouseTop = 0; //div top坐標(biāo)
$(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代碼:
<!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>

- jQuery控制Div拖拽效果完整實(shí)例分析
- jQuery實(shí)現(xiàn)拖拽效果插件的方法
- jquery實(shí)現(xiàn)簡(jiǎn)單的拖拽效果實(shí)例兼容所有主流瀏覽器
- jquery方法+js一般方法+js面向?qū)ο蠓椒▽?shí)現(xiàn)拖拽效果
- 基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能
- jquery利用拖拽方式在圖片上添加熱鏈接
- jQuery實(shí)現(xiàn)html元素拖拽
- jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
- jQuery拖拽插件gridster使用指南
- jquery拖拽效果完整實(shí)例(附demo源碼下載)
相關(guān)文章
基于jQuery插件實(shí)現(xiàn)環(huán)形圖標(biāo)菜單旋轉(zhuǎn)切換特效
本文給大家分享一款基于jQuery環(huán)形圖標(biāo)旋轉(zhuǎn)切換特效。這是一款鼠標(biāo)點(diǎn)擊圖標(biāo)菜單圓形順時(shí)針或者逆時(shí)針旋轉(zhuǎn)切換代碼。有需要的小伙伴可以參考下。2015-05-05jquery點(diǎn)擊切換背景色的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery點(diǎn)擊切換背景色的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-08-08jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法
這篇文章主要介紹了jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法,涉及針對(duì)插件源碼的修改,需要的朋友可以參考下2016-08-08基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)者,小編推薦使用返回list集合的方法,具體原因大家可以根據(jù)本文學(xué)習(xí)下2016-08-08jQuery中add實(shí)現(xiàn)同時(shí)選擇兩個(gè)id對(duì)象
jquery同時(shí)選擇兩個(gè)id對(duì)象的時(shí)候,可以用add來(lái)實(shí)現(xiàn)。2010-10-10jQuery基礎(chǔ)知識(shí)filter()和find()實(shí)例說明
這是jQuery里常用的2個(gè)方法。他們2者功能是完全不同的,而初學(xué)者往往會(huì)被誤導(dǎo)。2010-07-07幻燈片帶網(wǎng)頁(yè)設(shè)計(jì)中的20個(gè)奇妙應(yīng)用示例小結(jié)
幻燈片效果在網(wǎng)站中的使用非常流行,使用幻燈片效果既能在有限的網(wǎng)頁(yè)空間內(nèi)展示更多的內(nèi)容,又能增強(qiáng)視覺趣味,網(wǎng)上眾多的幻燈片插件資源也使得幻燈片的實(shí)現(xiàn)變得十分簡(jiǎn)單2012-05-05Jquery圖形報(bào)表插件 jqplot簡(jiǎn)介及參數(shù)詳解
jqPlot是 一款基于jquery類庫(kù)的圖標(biāo)繪制插件。通過jqPlot可以再網(wǎng)頁(yè)中繪制線狀、柱狀、餅狀等多種樣式圖表。而且,jqPlot具有插件可擴(kuò)展性 (Pluggability),你可以編寫自己的圖表樣式2012-10-10