图片拖拽,相信大家都会使用过,今天给大家介绍如何实现这些拖拽效果。
1、创建9个图片(9宫格)
<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>
2、代码尾部嵌入javascript
<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>
好了,实现了。图片下一次在放吧。仅供参考学习。