jquery 拖拽，框选的一点积累

浏览数：38 / 时间：2015年06月09日
拖拽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 拖拽，框选的一点积累