最近不是特忙,整理一下之前做的一些效果的代码,搞一些模板出来方便之后使用,很多效果完整版已经找不到了,只能找到一些只兼容某些浏览器的版本十分遗憾,所以以后应该多多整理。
我们提供的服务有:网站设计制作、成都做网站、微信公众号开发、网站优化、网站认证、潜山ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的潜山网站制作公司
效果如下:
虽然主要为了自己使用方便,但是如果有需要的同学,遇到不明白的也可以问我。
<!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' > <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' ></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>
网页题目:一个简单的图片拖拽排序效果 ----- JQUERY特效模板
标题URL:https://www.cdcxhl.com/article20/igpoco.html
成都网站建设公司_创新互联,为您提供网站设计、企业建站、企业网站制作、手机网站建设、网站制作、App开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联