乐趣区

关于前端:编辑器如何做一个完美的框选效果

jiezi

1、先写一个能够滚动的内容

<head>
    <style>
        #container {
            width: 400px;
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
        }

        .line {
            width: 360px;
            height: 40px;
            margin: 24px;
            background: #0082cc;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</body>

2、定义框选无效区

var selectContainer = document.getElementById('container');        // 选框无效区

3、鼠标按下时，进入一个总的办法

selectContainer.onmousedown = function () {alert(2222222);        // 测试在无效区内，鼠标按下响应的事件
}

4、欠缺鼠标按下的第一个执行操作：在容器里新增加一个方形 div

selectContainer.onmousedown = function (e) {var selection = document.createElement('div');
    selection.style.cssText="width: 100px; height: 100px; background: lightblue; opacity: 0.4";
    document.getElementById('container').appendChild(selection);
}

这个浅蓝色的方块就是咱们用鼠标拖动能够管制的 框选框。然而框选框的起始地位(x,y)，咱们要绝对于外框相对定位。所以，代码进一步写成：

#container {
    width: 400px;
    height: 300px;
    overflow-y: auto;
    position: relative;
    border: 1px solid #ddd;
}
selection.style.cssText="width: 100px; height: 100px; background: lightblue; opacity: 0.4; position: absolute";

并且此时咱们要申明两个变量：程度偏移地位，垂直偏移地位

<script>
    var startX = 0;
    var startY = 0;
selectContainer.onmousedown = function (e) {        
    startX = e.clientX;
    startY = e.clientY;

失去了鼠标点击的地位后，咱们试着把浅蓝色方块定位到这里。

selection.style.left = startX;
selection.style.top = startY;

咱们当初失去了鼠标点击的定位点，接下来就要找到鼠标拖动的方块的横纵坐标范畴。

5、找方块的范畴
首先，咱们的方块范畴是通过鼠标挪动的多少来决定的，所以咱们要写一个鼠标按下后的挪动事件：

selectContainer.onmousemove = function (e) {alert("挪动了！");
}

（未完待续 …）

退出移动版