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 ...
随机推荐
- 【转】Java提高篇（三四）-----fail-fast机制
转自:http://blog.csdn.net/chenssy/article/details/38151189 在JDK的Collection中我们时常会看到类似于这样的话: 例如 ...
- bzoj 4330: JSOI2012 爱之项链
听说这题不公开.. 那就不贴题意了 首先要用burnside引理求出戒指的种数,那么对于一个顺时针旋转$k$个位置的置换就相当于连上一条$(i,(i+k)%R)$的边,每个环颜色必须相同 环的个数为$ ...
- PHP_SELF、 SCRIPT_NAME、 REQUEST_URI区别
$_SERVER[PHP_SELF], $_SERVER[SCRIPT_NAME], $_SERVER['REQUEST_URI'] 在用法上是非常相似的,他们返回的都是与当前正在使用的页面地址有关的 ...
- 一张图系列——从CreateProcess到main函数的过程
整体过程如下: 需要说明两点: 1．在XP中,新进程主线程的启动,会先执行一个用户态的APC,会执行ntdll!LdrInitializeThunk进行程序执行前的一些列初始化操作.其中很重要任务就是 ...
- MySQL表的四种分区类型
MySQL表的四种分区类型 一.什么是表分区 通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了. 如:某用户表的记录超过了600万条,那么就可以根据入库日期将表 ...
- 删除MSSQL中所有表的数据
CREATE PROCEDURE sp_DeleteAllDataASEXEC sp_MSForEachTable 'ALTER TABLE ? NOCHECK CONSTRAINT ALL'EXEC ...
- Python 爬虫4——使用正则表达式筛选内容
之前说过,使用urllib和urllib2,只是为了获取指定URL的html内容,而对内容进行解析和筛选,则需要借助python中的正则表达式来完成. 一.预备知识: 1.正则表达式简述: 什么是正则 ...
- MFC覆盖OnPrepareDC实现“所见即所得”打印
附件下载:http://files.cnblogs.com/mengdejun/print.zip void CPrintView::OnPrepareDC(CDC* pDC, CPrintInfo* ...
- Xamarin的不归路-使用Gorilla Player实时预览XAML
搞了一天,才安装好,记录一下遇到的坑,为大家节约些时间. 一.下载软件 软件下载地址:http://gorillaplayer.com/ 没有FQ前用360极速浏览器和迅雷下载了好多次都失败了.用了蓝 ...
- Android使用Application的好处
如果一个应用程序有2个入口的,1个入口程序打开修改其中的内容,怎么实现另一个入口的数据也修改呢? 下面就用到Application来实现数据的共享,因为一个应用程序只有一个Application,Ap ...