<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery创建DIV块拖动布局代码</title>
<script src="js/interact.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
* {
padding: 0px;
margin: 0px;
}
.draggable {
width: 100px;
height: 100px;
line-height: 50px;
min-height: 10px;
min-width: 10px;
margin: 0px;
position: absolute;
padding: 1px;
left: 0px;
right: 0px;
background-color: #234b5e;
color: white;
border-radius: 0px;
padding: 0px;
float: left;
margin: 0px;
overflow: hidden;
opacity: 0.8;
}
h4 {
text-align: center;
vertical-align: middle;
}
p.wh {
font-size: 8px;
position: absolute;
bottom: 0px;
right: 0px;
line-height: 8px;
padding: 2px;
}
p.lt {
font-size: 8px;
position: absolute;
top: 0px;
left: 0px;
line-height: 8px;
padding: 2px;
}
p.close {
font-size: 8px;
position: absolute;
top: 0px;
right: 0px;
line-height: 8px;
padding: 2px;
cursor: pointer;
display: none;
}
.content {
border: 1px solid #ccc;
width: 1000px;
height: 600px;
position: relative;
margin: 0px auto;
}
h1 {
text-align: center;
}
.left {
background: #84acb3;
float: left;
width: 160px;
height: 100%;
}
.right {
background: #fff;
float: right;
width: 840px;
height: 100%;
position: relative;
}
.drag_l {
background-color: #234b5e;
border-radius: 11px;
color: #f7ebca;
cursor: pointer;
margin-bottom: 10px;
margin-left: 6px;
padding: 8px;
width: 128px;
text-align: center;
}
.drag_l:hover {
background-color: #577a8b;
}
pre {
color: green;
padding: 10px 15px;
background: #f0f0f0;
border: 1px dotted #333;
font: 12px/1.5 Courier New;
margin: 12px;
}
span {
color: #999;
}
</style>
</head>
<body>
<h1>楼宇图布局工具</h1>
<div id="content" class="content">
<div class="left">
<div style="padding-top: 8px;"></div>
</div>
<div class="right">
</div>
</div>
<script>
(function () {
var data = [
'001',
'002',
'003',
'004',
'005',
'006',
'007',
'008'
];
var dh = 100;
data.map(function (t, i) {
$('.left').append('<div class="drag_l" id="' + i + '" >' + t + '</div>')
});
$(function () {
$('.drag_l').click(function () {
$('.right').append('<div class="draggable" id="' + $(this).attr('id') + '" style=" background:' + getRandomColor() + '">\n' +
' <h4>' + $(this).text() + '</h4>\n' +
' <p class="lt"></p>\n' +
' <p class="wh"></p>\n' +
' <p class="close">关闭</p>\n' +
' </div>')
$(this).css("display", "none");
//$(this).attr("id")
});
mydrag();
});
var every_x = [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
var every_y = [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
var status1=true,status2=true,status3=true,status4=true;
function removeByValue(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
Array.prototype.insert = function (index, item) {
this.splice(index, 1, item);
};
var getRandomColor = function () {
return '#' +
(function (color) {
return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
var mydrag = function () {
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: false,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: {top: 0, left: 0, bottom: 1, right: 1}
},
maxPerElement: 100,
onmove: dragMoveListener,
onend: function (event) {
var textEl = event.target.querySelector('p.lt');
textEl && (textEl.textContent =
position(event));
var closeEl = event.target.querySelector('p.close');
closeEl.style.display = 'block';
drag_s(event);
myclose(event);
}
})
.resizable({
// resize from all edges and corners
edges: {left: true, right: true, bottom: true, top: true},
// keep the edges inside the parent
restrictEdges: {
outer: 'parent',
endOnly: true
},
// minimum size
restrictSize: {
min: {width: 0, height: 0}
},
inertia: false
})
.on('resizemove', function (event) {
var s = $(event.target);
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0),
xr=(parseFloat(target.getAttribute('data-x')) || 0)+s.width(),
yb=(parseFloat(target.getAttribute('data-y')) || 0)+s.height();
// update the element's style
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
xr += event.deltaRect.right;
yb += event.deltaRect.bottom;
var s = $(event.target);
var sid = s.attr('id');
var ns = parseInt(sid);
var i = ns * 2
every_y[i] = null;
every_x[i] = null;
every_y[i + 1] = null;
every_x[i + 1] = null;
for (ax in every_x) {
if ((parseInt(every_x[ax]) - 3) <= x && x <= (parseInt(every_x[ax]) + 3)) {
x = parseInt(every_x[ax]);
}else {
}
}
for (ay in every_y) {
if ((parseInt(every_y[ay]) - 3) <= y && y <= (parseInt(every_y[ay]) + 3)) {
y = parseInt(every_y[ay]);
}else {
}
}
for (a_x in every_x) {
if ((parseInt(every_x[a_x]) - 3) <= xr && xr <= (parseInt(every_x[a_x]) + 3)) {
xr = parseInt(every_x[a_x]);
}else {
}
}
for (a_y in every_y) {
if ((parseInt(every_y[a_y]) - 3) <= yb&& yb <= (parseInt(every_y[a_y]) + 3)) {
yb = parseInt(every_y[a_y]);
}else {
}
}
target.style.width = (xr-x) + 'px';
target.style.height =(yb-y) + 'px';
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.querySelector('p.wh').textContent =(xr-x) + '\u00D7' +(yb-y) + 'px';
var textEl = event.target.querySelector('p.lt');
textEl && (textEl.textContent =
position(event));
})
.on('resizeend', function (event) {
drag_s(event)
});
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
var s = $(event.target)
var sid = s.attr('id');
var ns = parseInt(sid);
var i = ns * 2
every_y[i] = null;
every_x[i] = null;
every_y[i + 1] = null;
every_x[i + 1] = null;
for (ax in every_x) {
if ((parseInt(every_x[ax]) - 3) <= x && x <= (parseInt(every_x[ax]) + 3)) {
x = parseInt(every_x[ax]);
}
}
for (ay in every_y) {
if ((parseInt(every_y[ay]) - 3) <= y && y <= (parseInt(every_y[ay]) + 3)) {
y = parseInt(every_y[ay]);
}
}
for (a_x in every_x) {
if ((parseInt(every_x[a_x]) - 3) <= (x+s.width()) && (x+s.width()) <= (parseInt(every_x[a_x]) + 3)) {
x = parseInt(ev
jQuery实现的拖动DIV模块自定义布局特效源码(支持放大缩小).zip （3个子文件） 
132696213622778700 
index.html 10KB js 
jquery-1.8.3.min.js 91KB interact.js 243KB资源评论
易小侠
- 粉丝: 6679
最新资源
- 第4课时Developingideas(Listeningandspeaking).pptx
- 三维点云可视化开源软件-CloudCompare
- 2019年企业网络推广方案策划书.doc
- 财务软件应用实训-实验指导书.doc
- 中仑智慧收银零售软件系统设计方案-1200字.docx
- AiIsBetter-xunfei-competition-201809-25332-1756642373139.zip
- 银行网络视频监控系统实施方案设计实施方案.doc
- 刺糖多孢菌功能蛋白质组及其多杀菌素产生代谢调控网络的研究.pptx
- 湖南省教育信息化专项试点工作方案.doc
- 计算机应用基础试题及参考答案.doc
- 谷神生物科技集团电子商务平台项目可行性分析报告.doc
- 网络安全加固最新解决方案.doc
- 自动控制原理及专业软件应用课程实习毕业设计论文.doc
- 电子商务中云计算的安全及关键技术分析.doc
- 采购项目申报表Excel模板.xls
- 单片机课程设计论文---基于stc15f2k60s的电子万年历.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
