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 ...
随机推荐
- Codeforces Round #345 (Div. 1) A. Watchmen
A. Watchmen time limit per test 3 seconds memory limit per test 256 megabytes input standard input o ...
- [NOIP2016]愤怒的小鸟 D2 T3 状压DP
[NOIP2016]愤怒的小鸟 D2 T3 Description Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于(0,0)处,每次Kiana可 ...
- 【系统篇】从int 3探索Windows应用程序调试原理
探索调试器下断点的原理 在Windows上做开发的程序猿们都知道,x86架构处理器有一条特殊的指令——int 3,也就是机器码0xCC,用于调试所用,当程序执行到int 3的时候会中断到调试器,如果程 ...
- 关于i和j
算法课无聊随手写了段c代码,发现了个问题,就要下课了,先记一下 for(int i = 0; i < 100; i ++) for(int j = 0; j < 100000; j ++) ...
- Ubuntu14.04或16.04下Hadoop及Spark的开发配置
对于Hadoop和Spark的开发,最常用的还是Eclipse以及Intellij IDEA. 其中,Eclipse是免费开源的,基于Eclipse集成更多框架配置的还有MyEclipse.Intel ...
- POJ2369 Permutations（置换的周期）
链接:http://poj.org/problem?id=2369 Permutations Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- 正确获取访问者ip
使用$_SERVER['REMOTE_ADDR']获取访问者ip具有局限性.比如访问者系统位于docker环境时,$_SERVER['REMOTE_ADDR']获取到的ip为虚拟ip,而不是我们真正需 ...
- NSTimer整理总结
对于定时器NSTimer,我们大家都不会陌生,在使用的时候,我们常常会遇到一些坑,例如:在Scrollview拖动时,timer会暂停:在子线程中如何创建一个定时器等.针对于一些我们所遇到的坑,我来总 ...
- C# 匿名对象随笔
最新更新请访问: http://denghejun.github.io C#中匿名对象的一般写法是这样的: object o=new {Name="TestName"}; ...
- asp.net中的<%%> <%#%> <%=%>形式的详细用法 (转载)
博客分类: ASP.NET 一. <%%>这种格式实际上就是和asp的用法一样的,只是asp中里面是vbscript或者javascript代码,而在asp.net中是.net平台下支 ...