jquery 拖拽，框选的一点积累
拖拽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
jquery 拖拽，框选的一点积累的更多相关文章
- 11个好用的jQuery拖拽拖放插件
这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
- jQuery拖拽改变元素大小
一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...
- jquery拖拽效果
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- jQuery拖拽 & 弹出层
了解更多请查看 官网 和 API iDrag & iDialog 介绍 特点: iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画. ...
- JQuery拖拽改变元素的尺寸
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...
- jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...
- Jquery拖拽原理
/* onmousedown : 选择元素 onmousemove : 移动元素 onmouseup : 释放元素 */ 查看Demo:拖拽图片 function drag(obj) { obj.on ...
随机推荐
- c＃接口与抽象类的区别
abstract 修饰符用于表示所修饰的类是不完整的,并且它只能用作基类.抽象类与非抽象类在以下方面是不同的: 抽象类不能直接实例化,并且对抽象类使用 new 运算符是编译时错误.虽然一些变量和值在编 ...
- 记录同事的一个bug-ajax-413错误-fullhead
症状表现为在form下面的textarea里的字符数只有几十个的时候,请求可以成功,但是如果有几百字,则会出现413错误,提示fullhead,我第一反应是cookie体积太小,但是清了缓存还是一样的 ...
- ElasticSearch问题记录
1.Young GC导致集群master重新选举,一台server fail [2016-12-10 07:38:24,546][WARN ][transport ] [BFRD_1] Receive ...
- js禁用右键菜单、选中、复制、剪切、粘贴
//屏蔽右键菜单 document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try ...
- centos 7 安装和配置vncserver
前期准备: 关闭防火墙,centos的防火墙是firewalld,关闭防火墙的命令 systemctl stop firewalld.service 关闭enforce setenforce 0 ce ...
- JavaScript解惑记之Array.prototype.sort()
前言 看JS红宝书的5.2.5章节关于sort()方法,如何用一个compare函数,让数组顺序,倒序,有点云里雾里的.在网上度娘了一下,发现更迷糊了.走投无路的情况下,只能发动神技能,去 stack ...
- 软件工程：vs单元测试
vs单元测试?VS?没装呢... 那么赶紧装个吧,于是跑到这去了: http://www.msdn.hk 我下个免费社区版. 安装过程没有什么需要说明的,傻瓜式安装会吗?当然中间会耗很长时间. 由于以 ...
- src/main/Java路径下的properties文件丢失
在pom中加入代码: <build> <resources> <resource> <directory>src/main/java</direc ...
- django _meta方法
models.Book._meta.'concrete_model': <class 'books.models.Book'> models.Book._meta.'related_fke ...
- MongoDB和Redis-NoSQL数据库-文档型-内存型
1NoSQL简述 CAP(Consistency,Availabiity,Partitiontolerance)理论告诉我们,一个分布式系统不可能满足一致性,可用性和分区容错性这三个需求,最多只能同时 ...