最近不是特忙，整理一下之前做的一些效果的代碼，搞一些模板出來方便之後使用，很多效果完整版已經找不到了，只能找到一些只兼容某些瀏覽器的版本十分遺憾，所以以後應該多多整理。
效果如下：
雖然主要爲了自己使用方便，但是如果有需要的同學，遇到不明白的也可以問我。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" type="text/javascript" src="min.js"></script>
<style>
.lister{float:left;margin:20px 0 0 20px;position:realtive;border:1px solid #ccc;width:100px;height:100px}
.drag{float:left;margin:20px 0 0 20px;position:realtive;border:1px dotted #ff0000;width:100px;height:100px}
</style>
</head>
<body>
<div id='listmain' style="float:left;width:400px;height:400px;clear:both;display:block">
<div class='lister' sorder='1'><img src='1.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='2'><img src='2.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='3'><img src='3.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='4'><img src='4.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='5'><img src='5.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='6'><img src='6.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='7'><img src='7.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='8'><img src='8.jpg' width='100px' height='100px'></div>
<div class='lister' sorder='9'><img src='9.jpg' width='100px' height='100px'></div>
</div>
<div id='drag_cont' style="position:absolute;border:1px solid #ccc;width:100px;height:100px;display:none;opacity:0.7;filter:alpha(opacity=70);"></div>
<script>
var _drag = {
ondrag:0,
space_order:0
}
$(document).ready(
function()
{
$.extend(
{
setcursor:function()
{
$("body").css("cursor","move");
},
delcursor:function()
{
$("body").css("cursor","default");
}
}
);
$.fn.extend(
{
make_drag:function()
{
var nowindex = $(this).attr("sorder");
var sindex = $(".drag").attr("sorder");
if($(this).attr("drag_flag") != 1)
{
$(".drag").remove();
if(nowindex>sindex)
{
$(this).after("<div class='drag'></div>");
}
else
{
$(this).before("<div class='drag'></div>");
}
$("#listmain").find("div").each(
function(i,n)
{
$(this).attr("sorder",(i+1));
}
);
}
}
}
);
$(".lister").live("mousedown",
function(e)
{
$.setcursor();
e = e || window.event;
if(e.preventDefault)
e.preventDefault();
else
e.returnvalue=false;
_drag.ondrag = 1;
_drag.space_order = $(this).attr('sorder');
$(this).attr("drag_flag",'1');
var win_scroll = $(window).scrollTop();
var xx = e.clientX;
var yy = e.clientY;
var listerbox = $(this).html();
$(this).html('').removeClass('lister').addClass('drag');
$("#drag_cont").html('').append(listerbox);
$("#drag_cont").css({'left':(xx-20)+"px",'top':(yy-20+win_scroll)+"px",'cursor':'move'});
$("#drag_cont").show();
if($(this).get(0).setCapture)
{
$(this).get(0).setCapture();
}
else if(window.captureEvents)
{
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
}
);
$(document).mouseup(
function(e)
{
e = e || window.event;
var dcont = $("#drag_cont").html();
_drag.ondrag = 0;
$("#drag_cont").hide();
$(".drag").removeClass("drag").addClass("lister").attr("drag_flag",0).append(dcont);
$.delcursor();
}
);
$(document).mousemove(
function(e)
{
if(_drag.ondrag == 1)
{
e = e || window.event;
var win_scroll = $(window).scrollTop();
var xx = e.clientX;
var yy = e.clientY;
$("#drag_cont").css({'left':(xx-20)+"px",'top':(yy+win_scroll-20)+"px",'cursor':'move'});
$(".lister").each(
function()
{
var tmpPos = $(this).offset();
if(xx>=tmpPos.left && xx<=(tmpPos.left+100) && yy>=tmpPos.top && yy<=(tmpPos.top+100))
$(this).make_drag();
}
);
}
}
);
}
);
</script>
</body>
</html>