最近不是特忙，整理一下之前做的一些效果的代碼，搞一些模板出來方便之後使用，很多效果完整版已經找不到了，只能找到一些只相容某些瀏覽器的版本十分遺憾，所以以後應該多多整理。
效果如下：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/1214152L1-0.jpg" title="effect.jpg" alt="105018840.jpg" />
雖然主要為了自己使用方便，但是如果有需要的同學，遇到不明白的也可以問我。
<!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>
本文出自 “找啊找” 部落格，請務必保留此出處http://searching.blog.51cto.com/7065945/1344959
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
