拖拽draggable，框选 selectable，按ctrl多选，临近辅助对齐，从工具栏拖工具 等，和jqueryui的selectable不同，是在一个父div里框选子div(类似框选文件)，一些功能不是很细致，仅供参考。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.1.js"></script>
<style>
#toolbox {
height: 120px;
display: block;
} #room {
height: 500px;
} .table {
background-color: cornflowerblue;
position: absolute;
cursor: move;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
} .vertical {
width: 100px;
height: 50px;
} .horizontal {
width: 50px;
height: 100px;
} #toolbox, #room {
position: relative;
border: 1px solid black;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
} .selectrect {
border: 1px solid black;
position: relative;
} #room .table.selected {
border: 1px solid #4e4e4e;
}
</style>
</head>
<body>
<div>
<a id="btntopalign">上边对齐</a>
<a id="btnleftalign">左边对齐</a>
<a id="btnbottomalign">下边对齐</a>
<a id="btnrightalign">右边对齐</a>
</div>
<div style="margin:20px;">
<div id="toolbox"> <div class="table horizontal" style="top:10px;left:10px;"> </div> <div class="table vertical" style="top:10px;left:220px;"> </div> </div>
<div id="room"> </div>
</div>
<script>
$(function () {
var selectedTool = {};
$("#toolbox .table").mousedown(function (e) {//工具栏选择图形
var $toolbox = $("#toolbox");
var $prototool = $(this);
var $newtable = $prototool.clone();
$newtable.css({
"top": "+=" + $toolbox.position().top,
"left": "+=" + $toolbox.position().left
})
selectedTool.$tool = $newtable;
$("body").append($newtable);
selectedTool.pageX = $newtable.position().left;
selectedTool.pageY = $newtable.position().top;
selectedTool.originPageX = e.pageX;//记录初始点，便于做靠近对齐
selectedTool.originPageY = e.pageY;
}); $(document).mousemove(function (e) {//从工具栏拖出
if (selectedTool.$tool) {
var deltaX = e.pageX - selectedTool.originPageX;
var deltaY = e.pageY - selectedTool.originPageY;
selectedTool.$tool.css({
"top": selectedTool.pageY + deltaY,
"left": selectedTool.pageX + deltaX
}); //todo 从工具栏拖的判断自动小范围对齐
}
}) $(document).mouseup(function (e) {
if (selectedTool.$tool) {
var $tool = selectedTool.$tool;
//todo 判断释放位置，做安全处理
var $room = $("#room");
$tool.detach();
$tool.appendTo($room);
$tool.css({
"top": "-=" + $room.position().top,
"left": "-=" + $room.position().left
});
setTimeout(function () {
$tool.Drag({ container: "#room", selector: ".table" });
}) selectedTool = {};
}
}) $("#room").Selectable({ selector: ".table" }); $("#btntopalign").click(function () {//对 选中的div 上边对齐
var selecteds = $("#room").find(".selected");
var maxtop = 100000;
selecteds.each(function (index,item) {
var crttop = $(item).position().top;
maxtop = Math.min(maxtop, crttop);
})
selecteds.each(function (index, item) {
$(item).css("top", maxtop);
})
}) $("#btnleftalign").click(function () {
var selecteds = $("#room").find(".selected");
var maxleft = 100000;
selecteds.each(function (index, item) {
var crtleft = $(item).position().left;
maxleft = Math.min(maxleft, crtleft);
})
selecteds.each(function (index, item) {
$(item).css("left", maxleft);
})
}) $("#btnrightalign").click(function () {
var selecteds = $("#room").find(".selected");
var maxleft = 0;
selecteds.each(function (index, item) {
var crtleft = $(item).position().left + $(item).width();
maxleft = Math.max(maxleft, crtleft);
})
selecteds.each(function (index, item) {
$(item).css("left", maxleft - $(item).width());
})
}) $("#btnbottomalign").click(function () {
var selecteds = $("#room").find(".selected");
var maxtop = 0;
selecteds.each(function (index, item) {
var crttop = $(item).position().top + $(item).height();
maxtop = Math.max(maxtop, crttop);
})
selecteds.each(function (index, item) {
$(item).css("top", maxtop - $(item).height());
})
}) })
</script> <script>
(function () {
var defaults = {
body: '#dragId',
handle: '',
selector: ".table",
container: ""
}; var Constructor = function (item, options) {
var opts = this.opts = $.extend({}, defaults, options);
var a = opts.handle;
var b = opts.body;
if (a) {
if (b) {
opts.$body = $(b);
}
else {
opts.$body = $(item);
}
opts.$handle = $(a);
}
else {
opts.$body = $(item);
opts.$handle = $(item);
} this.$body = opts.$body;
this.$handle = opts.$handle;
this.$container = $(this.opts.container);
this.init();
} Constructor.prototype = {
init: function () {
this.dragments = {
draggable: false,
elementX: 0,
elementY: 0,
originX: 0,
originY: 0
}; this.$handle.mousedown($.proxy(this.mousedown, this));
$(document).mouseup($.proxy(this.mouseup, this));
$(document).mousemove($.proxy(this.mousemove, this));
this.$handle.css("cursor", "move");
},
mousedown: function (e) {
this.dragments.draggable = true;
this.dragments.originX = e.pageX;
this.dragments.originY = e.pageY;
this.dragments.elementX = this.$body.position().left;
this.dragments.elementY = this.$body.position().top;
},
mouseup: function () {
this.dragments.draggable = false;
},
mousemove: function (e) {
var self = this;
if (this.dragments.draggable) {
var deltaX = e.pageX - this.dragments.originX;
var deltaY = e.pageY - this.dragments.originY; //region 简单辅助对齐
var nowY = this.dragments.elementY + deltaY;
var nowX = this.dragments.elementX + deltaX;
var tables = self.$container.find(self.opts.selector); var finalX = nowX;
var finalY = nowY;
tables.each(function (index, item) {
if (item == self.$body[0]) {
return true;
}
var position = $(item).position();
if (Math.abs(position.top - nowY) < 5) {
finalY = position.top;
}
if (Math.abs(position.top + $(item).height() - nowY) < 5) {
finalY = position.top + $(item).height();
}
if (Math.abs(position.top - self.$body.height() - nowY) < 5) {
finalY = position.top - self.$body.height();
}
if (Math.abs(position.top + $(item).height() - self.$body.height() - nowY) < 5) {
finalY = position.top + $(item).height() - self.$body.height();
} if (Math.abs(position.left - nowX) < 5) {
finalX = position.left;
}
if (Math.abs(position.left + $(item).width() - nowX) < 5) {
finalX = position.left + $(item).width();
}
if (Math.abs(position.left - self.$body.width() - nowX) < 5) {
finalX = position.left - self.$body.width();
}
if (Math.abs(position.left + $(item).width() - self.$body.width() - nowX) < 5) {
finalX = position.left + $(item).width() - self.$body.width();
}
}) //endregion this.$body.css({
"top": finalY,
"left": finalX
});
}
}
}; $.fn.Drag = function (opts) {
$(this).each(function (index, item) {
return new Constructor(item, opts);
})
}
})(); (function () {
var defaults = {
selector: ".table"
}; function Plugin(item, options) {
var self = this;
var opts = this.opts = $.extend({}, defaults, options);
self.$container = $(item);
$(item).mousedown(function (e) {
if (e.target == e.currentTarget) {//非冒泡
self.isSelectState = true;
}
}) $(document).mousemove(function (e) {
if (self.isSelectState) {
self.mousemove(e);
}
}); $(document).mouseup(function (e) {
if (self.isSelectState) {
self.isSelectState = false;
self.pinRect = false;
self.isMouseMoving = false;
if (self.$selectRect) {
self.$selectRect.remove();
self.$selectRect = null;
}
}
}); $(item).click(function (e) {
if (e.target == e.currentTarget) {//非冒泡
self.removeAllSelected();
}
}) $(document).keydown(function (e) {
if (e.ctrlKey) {
self.ctrlKeyPressed = true;
}
});
$(document).keyup(function (e) {
if (!e.ctrlKey) {
self.ctrlKeyPressed = false;
}
}); self.$container.on("click", self.opts.selector, function () {
if (self.ctrlKeyPressed) {
$(this).addClass("selected");
}
else {
self.removeAllSelected();
$(this).addClass("selected");
}
})
} Plugin.prototype.mousemove = function (e) {
var self = this;
if (!self.$selectRect && !self.isMouseMoving) {
self.isMouseMoving = true; self.rectY = e.pageY - self.$container.position().top;
self.rectX = e.pageX - self.$container.position().left;
} if (self.isMouseMoving) {
var newY = e.pageY - self.$container.position().top;
var newX = e.pageX - self.$container.position().left;
if ((newY - self.rectY) > 5 && (newX - self.rectX) > 5) {
self.$selectRect = $("<div/>").addClass("selectrect");
self.$container.append(self.$selectRect);
var rect = self.$selectRect;
rect.css({
"top": self.rectY,
"left": self.rectX
});
self.pinRect = true;
self.isMouseMoving = false;
}
} if (self.pinRect) {
var newY = e.pageY - self.$container.position().top;
var newX = e.pageX - self.$container.position().left;
var width = newX - self.rectX;
var height = newY - self.rectY;
self.$selectRect.css({
"width": width,
"height": height
})
//检查选中的
var tables = self.$container.find(self.opts.selector)
tables.each(function (index, table) {
var tableX = $(table).position().left + $(table).width() / 2;
var tableY = $(table).position().top + $(table).height() / 2; if (tableX > self.rectX && tableY > self.rectY && tableX < newX && tableY < newY) {
$(table).addClass("selected");
}
else {
$(table).removeClass("selected");
}
})
} } Plugin.prototype.removeAllSelected = function () {
var self = this;
var tables = self.$container.find(self.opts.selector)
tables.each(function (index, table) {
$(table).removeClass("selected");
})
} Plugin.prototype.getSelected = function () {
var self = this;
var tables = self.$container.find(self.opts.selector)
var selected = [];
tables.each(function (index, table) {
selected.push($(table));
})
} $.fn.Selectable = function (opts) {
$(this).each(function (index, item) {
return new Plugin(item, opts);
})
}
})(); </script>
</body>
</html>
转载注明出处：博客园 http://www.cnblogs.com/gxrsprite