jquery单元素拖动框选对齐效果代码
代码语言:html
所属分类:选择器
代码描述:jquery单元素拖动框选对齐效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.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 () { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0