-
<!DOCTYPE HTML>
-
-
<html>
-
-
<head>
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-
<title>测试的拖拽功能</title>
-
-
<style type="text/css">
-
-
body, div { margin: 0; paading: 0; font-size: 12px;}
-
-
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
-
-
.bor2 { padding: 20px 0 0 0; }
-
-
.box { height: 200px; margin: 0 auto; margin-top: 15px; }
-
-
-
-
.box2 { margin: 0 auto; margin-top: 15px; }
-
-
.bor { position: static; width: 100px; height: 100px; margin: 0 0 5px 30px ; float:left; color:#fff; font-weight:bold; padding:5px 0 0 5px;}
-
-
.bor:hover{border-color: #9a9fa4; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);}
-
-
.mousehover{ border-color: #9a9fa4; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85); cursor:move;}
-
-
.borp { position: absolute; width: 100px; height: 80px; margin: 10px; padding: 10px; border: 1px solid #ccc; background: #ececec; }
-
-
/*
-
.bg { width: 100px; height: 100px; margin: 8px 5px 0 auto; padding: 10px; border: 1px solid #ccc; } */
-
-
.bg { width: 160px; height: 130px; margin: 8px 5px 0 auto; padding: 10px; border: 1px dashed #bfbfbf; float:left; border-radius:20px;}
-
-
.bg:hover{border-color: #9a9fa4; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);}
-
-
.text2 { width: 200px; }
-
-
-
.bgColor { border: 1px dashed #9a9fa4; }
-
-
/*
-
.bgColor { border: 1px dashed #bfbfbf; } */
-
-
</style>
-
-
<link rel="stylesheet" href="bootstrap.min.css" />
-
-
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
-
-
<script type="text/javascript">
-
-
$(document).ready(function() {
-
-
-
-
var $bg = $(".bg");
-
-
var initDiv, tarDiv, tarDivHalf = 0, wHalf = 0; //拖拽对象 目标对象
-
-
var initPos = {x: 0, y: 0}, relPos = {x: 0, y: 0}, temPos = {x: 0, y: 0};
-
-
var dragPos = {x1: 0, x2: 0, y1: 0, y2: 0};// 拖拽对象的四个坐标
-
-
var tarDivPos = {x1: 0, y1: 0, x2: 0, y2: 0}; //目标对象的四个坐标
-
-
$(".bor").each(function(){
-
-
var move = false; // 移动的初始化
-
-
$(this).mousedown(function(event) {
-
-
borSub = $(this).index();
-
-
initDiv = $(".bor").eq(borSub); //拖拽对象
-
-
//initDiv.clone().addClass("clone").appendTo($("body"));
-
-
// 鼠标 与 目标元素的相对坐标
-
-
relPos.x = event.pageX - $(this).offset().left;
-
-
relPos.y = event.pageY - $(this).offset().top;
-
-
move = true;
-
-
});
-
-
$(document).mousemove(function(event) {
-
-
if (!move) { return false; }
-
-
// 下列代码是 if(move)的 程序
-
-
initDiv.removeClass("bor").addClass("borp");
-
-
// 目标元素随鼠标移动的坐标
-
-
dragPos.x1 = event.pageX - relPos.x;
-
-
dragPos.y1 = event.pageY - relPos.y;
-
-
dragPos.x2 = dragPos.x1 + initDiv. innerWidth();
-
-
dragPos.y2 = dragPos.y1 + initDiv. innerHeight();
-
-
initDiv.css({ left: dragPos.x1 +'px', top: dragPos.y1 + 'px' });
-
-
$bg.each(function() {
-
-
tarDiv = $(this);
-
-
// 目标对象的坐标
-
-
tarDivPos.x1 = tarDiv.offset().left;
-
-
tarDivPos.x2 = tarDivPos.x1 + tarDiv.width();
-
-
tarDivPos.y1 = tarDiv.offset().top;
-
-
tarDivPos.y2 = tarDivPos.y1 + tarDiv.height();
-
-
tarDivHalf = tarDiv.height()/2; //临时变量，以便于在if判断中使用
-
-
wHalf = tarDiv.width()/2;
-
-
if (dragPos.x2 >= tarDivPos.x1 + wHalf && dragPos.x2 <= tarDivPos.x2 + wHalf && dragPos.y2 >= tarDivPos.y1 + tarDivHalf && dragPos.y2 <= tarDivPos.y2 + tarDivHalf ) {
-
-
if(tarDiv.children().length >0 ) {
-
-
tarDiv.children().html(initDiv.html());
-
return false;
-
}// 解决重叠元素 移动到一个目标元素
-
-
tarDiv.removeClass("bg").addClass("bg bgColor");
-
-
} else {
-
-
tarDiv.removeClass("bgColor");
-
-
}
-
-
});
-
-
})
-
-
$(document).mouseup (function(event,source) {
-
-
if( $(".bgColor").html()=="")
-
{
-
initDiv.appendTo($(".bgColor"));//使拖动元素对象添加到指定的区域。
-
-
if(initDiv.html()=="111")
-
{
-
$(".bgColor").html("
111
");
-
}
-
-
if(initDiv.html()=="222")
-
{
-
$(".bgColor").html("
222
");
-
}
-
-
if(initDiv.html()=="333")
-
{
-
$(".bgColor").html("
333
");
-
}
-
-
if(initDiv.html()=="444")
-
{
-
$(".bgColor").html("
444
");
-
}
-
-
if(initDiv.html()=="555")
-
{
-
$(".bgColor").html("
555
");
-
}
-
-
if(initDiv.html()=="666")
-
{
-
$(".bgColor").html("
666
");
-
}
-
}
-
-
// initDiv.removeClass("borp").addClass("bor").removeAttr("style"); //恢复拖拽对象初始的样式
-
initDiv.removeClass("borp").addClass("bor"); //恢复拖拽对象初始的样式
-
-
move = false;
-
-
});
-
-
-
});
-
-
-
});
-
-
function reLoad(){
-
window.location.reload();
-
}
-
-
</script>
-
-
</head>
-
-
<body>
-
<div class="box" style="margin-left:400px;">
-
-
<div class="bor" id="bor1" style="background:url(device.png);">111</div>
-
-
<div class="bor" id="bor2" style="background:url(tuopo.png);">222</div>
-
-
<div class="bor" id="bor3" style="background:url(guzhang.png);">333</div>
-
-
<div class="bor" id="bor4" style="background:url(inventory.png);">444</div>
-
-
<div class="bor" id="bor5" style="background:url(zhuzhi.png);">555</div>
-
-
<div class="bor" id="bor6" style="background:url(system.png);">666</div>
-
-
</div>
-
-
<div class="clear"></div>
-
-
<div class="box2" style="margin-top:100px;">
-
<table align="center">
-
<tr>
-
<td> <div class="bg" id="bg1" onclick="delete();"></div> </td>
-
<td> <div class="bg" id="bg2" onclick="delete();"></div> </td>
-
</tr>
-
<tr>
-
<td> <div class="bg" id="bg3" onclick="delete();"></div> </td>
-
<td> <div class="bg" id="bg4" onclick="delete();"></div> </td>
-
</tr>
-
</table>
-
</div>
-
-
-
<div style="float:right; margin-top:50px; margin-right:500px;">
-
-
<button type="button" class="btn btn-info" onclick="reLoad();">重选</button>
-
<button type="button" class="btn btn-primary" onclick="confirm();" style="margin-left:3px;">确定</button>
-
</div>
-
</body>
阅读(525) | 评论(0) | 转发(0) |
