<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<style type="text/css">
.drag {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid #96C2F1;
background-color: #EFF7FF;
cursor: move;
line-height: 100px;
text-align: center;
}
td {
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
; (function (document) {
//Usage: $("#id").drag()
//Author: hooyes
var Containters = new Array();
$.fn.Drag = function () {
var OriginX, OriginY;
var M = false;
var Rx, Ry;
var t = $(this);
var left, top, right, bottom;
t.mousedown(function (event) {
OriginX = t.offset().left;
OriginY = t.offset().top;
Rx = event.pageX - (t.offset().left || 0);
Ry = event.pageY - (t.offset().top || 0);
t.css({ position: "absolute", cursor: 'move', top: OriginY, left: OriginX }).fadeTo(20, 0.5);
M = true;
})
.mouseup(function (event) {
M = false; t.fadeTo(20, 1);
for (var i = 0; i < Containters.length; i++) {
var o = Containters[i];
if (left >= o.left && top >= o.top && right <= o.right && bottom <= o.bottom) {
t.css({ top: 0, left: 0, margin: 'auto', position: "relative" });
o.obj.append(t);
break;
} else {
t.css({ top: OriginY, left: OriginX });
}
}
});
$(document).mousemove(function (event) {
if (M) {
left = event.pageX - Rx;
top = event.pageY - Ry;
right = left + t.width();
bottom = top + t.height();
t.css({ top: top, left: left });
Containters.forEach(function (o) {
if (left >= o.left && top >= o.top && right <= o.right && bottom <= o.bottom) {
o.obj.css('background-color', '#EAE3E9');
} else {
o.obj.css('background-color', '');
}
});
}
});
},
$.fn.Containt = function () {
this.each(function (i, d) {
Containters.push({ obj: $(d), top: $(d).offset().top, left: $(d).offset().left, right: $(d).offset().left + $(d).width(), bottom: $(d).offset().top + $(d).height() });
});
}
})(document);
$(document).ready(function () {
$("#Div1").Drag();
$("td").Containt();
});
</script>
</head>
<body>
<div id="Div1" class="drag">我是DIV1</div>
<div class="box">
<div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
拖動DIV到指定的區域,不是該區域不允許拖動
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章