jQuery(拖动换位有关问题)
日期：2014-05-16 浏览次数：20473 次
jQuery(拖动换位问题)
我直接上代码
我直接上代码
- HTML code
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
