angularjs鼠标拖动画矩形框(兼容IE8)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical}
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #longzhoufeng {
            position: relative;
            left: 0;
            top: 0;
            margin: 0 auto;
            padding: 0;
            width: 800px;
            min-height: 800px;
            overflow: auto;
            height: 1000px;
            background-color: #e9e9e9;
        }
        .dashed-box {
            position: absolute;
            border: 1px dashed red;
            width: 0px;
            height: 0px;
            left: 0px;
            top: 0px;
            overflow: hidden;
        }
        #moving_box {
            border: 2px solid red;
        }
        .question-box {
            position: absolute;
            /* older safari/Chrome browsers */
            -webkit-opacity: 0.5;
            /* Netscape and Older than Firefox 0.9 */
            -moz-opacity: 0.5;
            /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
            -khtml-opacity: 0.5;
            /* IE9 + etc...modern browsers */
            opacity: .5;
            /* IE 4-9 */
            filter: alpha(opacity=50);
            /*This works in IE 8 & 9 too*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            /*IE4-IE9*/
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        }
        .question-border {
            border: 2px dashed red;
            overflow: hidden;
            z-index: 1;
        }
        .del-box {
            width: 20px;
            height: 20px;
            float: right;
            color: #fff;
            position: relative;
            margin-top: 1px;
            margin-right: 1px;
            z-index: 99;
            background-color: red;
        }
        .active-border {
            border: 2px solid red;
            -webkit-opacity: 0.5;
            /* Netscape and Older than Firefox 0.9 */
            -moz-opacity: 0.5;
            /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
            -khtml-opacity: 0.5;
            /* IE9 + etc...modern browsers */
            opacity: .5;
            /* IE 4-9 */
            filter: alpha(opacity=50);
            /*This works in IE 8 & 9 too*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            /*IE4-IE9*/
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        }
        .box-background-image {
            position: absolute;
            width: 1000px;
            height: 1600px;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>
    <script>
        var app = angular.module('miniapp', []);

        function AppController($scope, $timeout) {
            //阻止默认行为
            function stopDefault(e) {
                if(e && e.preventDefault)
                    e.preventDefault();
                else
                    window.event.returnValue = false;
                return false;
            }

            $scope.bgImg = '1.jpg';
            $scope.getBoxPicSize = function() {
                $scope.bgWidth = angular.element(".box-background-image").width();
                $scope.bgHeight = angular.element(".box-background-image").height();
            }
            ///////////////////////////////////////
            var wId = "num";
            var index = 0;
            var target = null;
            var startX = 0, startY = 0;
            var flag = false;
            var startL = 0, startT = 0, boxHeight = 0, boxWidth = 0;
            var boxObj = document.getElementById("longzhoufeng");
            var frame = $("#longzhoufeng");
            var frameBox = {
                "pos": frame.offset(),
                "width": frame.outerWidth(),
                "height": frame.outerHeight()
            }
            var newMarkPos = {
                "left": startL,//按下时鼠标距离的左边的距离
                "top": startT//按下时鼠标距离的上边的距离
            }
            var myEvent = $scope.myEvent = {
                //鼠标点击
                mouseDown: function(e) {
                    flag = true;
                    var e = window.event || e;
                    target = e.target || e.srcElement; //获取document 对象的引用
                    //e.pageY，e.pageX兼容
                    if(target.src) {
                        stopDefault(e)
                    }
                    var scrollTop = boxObj.scrollTop;
                    var scrollLeft = boxObj.scrollLeft;
                    var ePageX = e.clientX + scrollLeft;
                    var ePageY = e.clientY + scrollTop;
                    //按下时鼠标距离页面的距离
                    startX = ePageX;
                    startY = ePageY;
                    //按下时鼠标距离的左边和上边的距离
                    startL = startX - frameBox.pos.left;
                    startT = startY - frameBox.pos.top;
                    index++;
                    var div = document.createElement("div");
                    div.id = wId + index;
                    div.className = "dashed-box";
                    boxObj.appendChild(div);
                    div = null;
                    // 如果鼠标在 box 上被按下
                    if(target.className.match(/del-box/i)) {
                        // 允许拖动
                        flag = false;
                        // 设置当前 box 的 id 为 moving_box
                        var movingBox = document.getElementById("moving_box")
                        if(movingBox !== null) {
                            movingBox.removeAttribute("id");
                        }
                        target.id = "moving_box";
                        // removeBox(target);
                    } else {
                        var div = document.createElement("div");
                        div.id = wId + index;
                        div.className = "dashed-box";
                        boxObj.appendChild(div);
                        div = null;
                    }
                },
                //鼠标离开
                mouseUp: function(e) {
                    var e = window.event || e;
                    if(boxWidth >= 1 || boxHeight >= 1) {
                        boxObj.removeChild(dragBox(wId + index));
                        index++;
                        var div = document.createElement("div");
                        div.className = "question-box question-border";
                        div.style.left = newMarkPos.left + "px";
                        div.style.top = newMarkPos.top + "px";
                        div.style.width = boxWidth + "px";
                        div.style.height = boxHeight + "px";
                        boxObj.appendChild(div);
                        div = null;
                        boxWidth = 0;
                        boxHeight = 0;
                    } else {
                        if(flag) {
                            boxObj.removeChild(dragBox(wId + index));
                        }
                    }
                    flag = false;
                },
                //鼠标移动
                mouseMove: function(e) {
                    var e = window.event || e;
                    stopDefault(e)
                    if(flag) {
                        var scrollTop = boxObj.scrollTop;
                        var scrollLeft = boxObj.scrollLeft;
                        var ePX = e.clientX + scrollLeft;
                        var ePY = e.clientY + scrollTop;
                        var disW = ePX - startX;
                        var disH = ePY - startY;
                        var L = startL + disW;
                        var T = startT + disH;
                        if(disW > 0) {
                            if(L >= 0) {
                                boxWidth = disW
                            }
                            newMarkPos.left = startL;
                        } else {
                            if(L <= 0) {
                                L = 0;
                                boxWidth = startL;
                            }
                            boxWidth = (startL - L);
                            newMarkPos.left = L;
                        }
                        if(disH > 0) {
                            if(T >= 0) {
                                boxHeight = disH
                            }
                            newMarkPos.top = startT;
                        } else {
                            if(T <= 0) {
                                T = 0;
                                boxHeight = startT;
                            }
                            boxHeight = (startT - T)
                            newMarkPos.top = T;
                        }
                        dragBox(wId + index).style.left = newMarkPos.left + "px";
                        dragBox(wId + index).style.top = newMarkPos.top + "px";
                        dragBox(wId + index).style.width = Math.abs(boxWidth) + "px";
                        dragBox(wId + index).style.height = Math.abs(boxHeight) + "px";
                        if(e.srcElement.src) {
                            stopDefault(e)
                        }
                    }
                }
            }
            var dragBox = function(id) {
                return document.getElementById(id);
            }
        }

        //等待图片加载完成
        app.directive("loadImage", function() {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    element.bind('load', function() {
                        scope.$apply(attrs.loadImage);
                    });
                }
            }
        })
    </script>
</head>
<body>
<div ng-app="miniapp" ng-controller="AppController">
    <div class="main">
        <div id="longzhoufeng" ng-mousedown="myEvent.mouseDown($event)" ng-mouseup="myEvent.mouseUp($event)" ng-mousemove="myEvent.mouseMove($event)">
            <img ng-src="{{bgImg}}" class="box-background-image" load-image="getBoxPicSize()">
        </div>
    </div>
</div>
</body>
</html>
angularjs鼠标拖动画矩形框(兼容IE8)

猜你喜欢
