jQuery(拖动换位问题)
我直接上代码
<!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=utf-8" /><script type="text/javascript" src="http://res.img.ifeng.com/685a818075b4d83c/2011/0623/jquery1.3.2.js"></script><script type="text/javascript" src="http://www.tongyueli.com/hwg/js/jquery-ui-1.8.16.custom.min.js"></script><title>照片墙拖拽换位</title><style type="text/css">body{margin: 0px; padding: 4px;}.block{float: left;margin: 1px;display: inline-block;background-color: lightblue;border: 2px dashed lightpink;}.cursor{cursor: pointer, url(../cursor/hand.cur), auto;}.hover{ border: 2px 1px; border-style: dashed; border-color: #f30; opacity:0.5;filter:alpha(opacity=50);}</style><script type="text/javascript">//铺满全屏function layoutDiv(){ $(".block").css({ width: ($(window).width() - 8) / 3 - 6, height: ($(window).height() - 8) / 3 - 6 });};$(document).ready(function(){ layoutDiv(); $(".block").disableSelection(); var isMove = false; var dragers = []; $(".demo div").mousedown(function(e){ if(e.which == 1){ dragers = []; isMove = true; $(this).attr("isDown", true); $(document.body).addClass("cursor"); dragers.push($(this)); } }).mouseover(function(){ if(isMove && !$(this).attr("isDown")){ $(this).addClass("hover"); } }).mouseout(function(){ if(isMove && !$(this).attr("isDown")){ $(this).removeClass("hover"); } }).mouseup(function(e){ if(e.which == 1 && !$(this).attr("isDown")){ dragers.push($(this)); change(dragers[0], dragers[1]); } }); $(document).mouseup(function(e){ if(e.which == 1){ isMove = false; $(".demo div").removeAttr("isDown").removeClass("hover"); $(document.body).removeClass("cursor"); } });})var zIndex = 1;/*function change(drag_cur, drag_target){ var pos_drag_cur = {x:drag_cur.offset().left, y: drag_cur.offset().top}; var pos_drag_target = {x:drag_target.offset().left, y: drag_target.offset().top}; drag_cur.css({'z-index': zIndex++}).animate({left: pos_drag_target.x, top: pos_drag_target.y}, function(){ drag_target.css({position: 'absolute', 'z-index': zIndex++}).animate({left: pos_drag_cur.x, top: pos_drag_cur.y}); });}*/function change(dragger, dropper){ var pos_dragger = {x: dragger.position().left, y: dragger.position().top}; var pos_dropper = {x: dropper.position().left, y: dropper.position().top}; dragger.css({position: 'absolute', 'z-index': zIndex++}).animate({left: pos_dropper.x, top: pos_dropper.y}, function(){ dropper.css({position: 'absolute', 'z-index': zIndex++}).animate({left: pos_dragger.x, top: pos_dragger.y}); });}$(window).resize(layoutDiv);//重新布局</script></head><body><div class="demo"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> <div class="block">9</div></div></body></html>