最近不是特忙，整理一下之前做的一些效果的代码，搞一些模板出来方便之后使用，很多效果完整版已经找不到了，只能找到一些只兼容某些浏览器的版本十分遗憾，所以以后应该多多整理。
虽然主要为了自己使用方便，但是如果有需要的同学，遇到不明白的也可以问我。
<!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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦