Javascript实现鼠标框选操作  不是点击选取

本文实例为大家分享了Javascript实现鼠标框选操作,绝不是点击选取,供大家参考,具体内容如下

效果图:

代码:

<html>
<head></head>
<style>
body{padding:100px;}
.fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;}
.seled{border:1px solid red;background-color:#D6DFF7;}
</style>
<script type="text/javascript">
(function() {
  document.onmousedown = function() { 

    var selList = [];
    var fileNodes = document.getElementsByTagName("div");
    for ( var i = 0; i < fileNodes.length; i++) {
      if (fileNodes[i].className.indexOf("fileDiv") != -1) {
        fileNodes[i].className = "fileDiv";
        selList.push(fileNodes[i]);
      }
    } 

    var isSelect = true;
    var evt = window.event || arguments[0];
    var startX = (evt.x || evt.clientX);
    var startY = (evt.y || evt.clientY);
    var selDiv = document.createElement("div");
    selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
    selDiv.id = "selectDiv";
    document.body.appendChild(selDiv); 

    selDiv.style.left = startX + "px";
    selDiv.style.top = startY + "px"; 

    var _x = null;
    var _y = null;
    clearEventBubble(evt); 

    document.onmousemove = function() {
      evt = window.event || arguments[0];
      if (isSelect) {
        if (selDiv.style.display == "none") {
          selDiv.style.display = "";
        }
        _x = (evt.x || evt.clientX);
        _y = (evt.y || evt.clientY);
        selDiv.style.left = Math.min(_x, startX) + "px";
        selDiv.style.top = Math.min(_y, startY) + "px";
        selDiv.style.width = Math.abs(_x - startX) + "px";
        selDiv.style.height = Math.abs(_y - startY) + "px"; 

        // ---------------- 关键算法 ---------------------
        var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
        var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
        for ( var i = 0; i < selList.length; i++) {
          var sl = selList[i].offsetWidth + selList[i].offsetLeft;
          var st = selList[i].offsetHeight + selList[i].offsetTop;
          if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
            if (selList[i].className.indexOf("seled") == -1) {
              selList[i].className = selList[i].className + " seled";
            }
          } else {
            if (selList[i].className.indexOf("seled") != -1) {
              selList[i].className = "fileDiv";
            }
          }
        } 

      }
      clearEventBubble(evt);
    } 

    document.onmouseup = function() {
      isSelect = false;
      if (selDiv) {
        document.body.removeChild(selDiv);
        showSelDiv(selList);
      }
      selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
    }
  }
})();
function clearEventBubble(evt) {
  if (evt.stopPropagation)
    evt.stopPropagation();
  else
    evt.cancelBubble = true;
  if (evt.preventDefault)
    evt.preventDefault();
  else
    evt.returnValue = false;
}
function showSelDiv(arr) {
  var count = 0;
  var selInfo = "";
  for ( var i = 0; i < arr.length; i++) {
    if (arr[i].className.indexOf("seled") != -1) {
      count++;
      selInfo += arr[i].innerHTML + "\n";
    }
  }
  alert("共选择 " + count + " 个文件,分别是:\n" + selInfo);
}
</script>
<body>
  <div class="fileDiv">file1</div>
  <div class="fileDiv">file2</div>
  <div class="fileDiv">file3</div>
  <div class="fileDiv">file4</div>
  <div class="fileDiv">file5</div>
  <div class="fileDiv">file6</div>
  <div class="fileDiv">file7</div>
  <div class="fileDiv">file8</div>
  <div class="fileDiv">file9</div> 

</body>
</html> 

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • JS实现鼠标框选效果完整实例

    本文实例讲述了JS实现鼠标框选效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char

  • 基于Fixed定位的框选功能的实现代码

    最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发.在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的.但是现实需求里几乎都是针对某个区域的框选.如果用绝对定位实现就比较繁琐了,需要调整定位原点.下面介绍一种基于Fixed定位的框选实现. 需求描述 按住鼠标左键不放,移动鼠标出现选择框 在鼠标移动的过程中,在框选范围内的元素高亮 松开鼠标左键,弹出编辑框,批量操作所有被框选的元素 实现 事件绑定 首先梳理一下需要用到

  • JavaScript实现点击文本自动定位到下拉框选中操作

    本文实例为大家分享了js点击文本自动定位到下拉框选的具体代码,供大家参考,具体内容如下 <html > <head runat="server"> <title></title> <style type="text/css"> #SiteStat { width: 97px; height: 181px; } </style> </head> <body> <fro

  • 用javascript实现鼠标框选

    起初是打算兼容 Netscape 和 FireFox 等浏览器的,但这些浏览器中不支持 style.pixelLeft,得使用 style.left 之类的(style.pixelLeft 为数字无单位,style.left 为文本有单位),实际使用中发现效果很不好,有延迟状,所以还是使用 style.pixelLeft,缺点是仅支持 IE 系列浏览器. 鼠标框选框 document.body.clientWidth || event.clientY>document.body.clientHe

  • Javascript实现鼠标框选操作 不是点击选取

    本文实例为大家分享了Javascript实现鼠标框选操作,绝不是点击选取,供大家参考,具体内容如下 效果图: 代码: <html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;marg

  • Javascript实现鼠标框选操作  不是点击选取

    本文实例为大家分享了Javascript实现鼠标框选操作,绝不是点击选取,供大家参考,具体内容如下 效果图: 代码: <html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;marg

  • 用C# 实现鼠标框选效果的实现代码

    实现步骤: 1.实现整个鼠标框选的几个事件(down.move.up),当鼠标点下记录鼠标框选的起点,鼠标抬起结束操作. 2.以鼠标框选过程中获取的鼠标坐标为基点计算框选的矩形的4点坐标,4点坐标以顺时针方向布点. 3.通过Shape.Path类实现在类上画出此矩形. 代码如下: 复制代码 代码如下: namespace HostDemo { public class HostCanvas : Canvas {  public HostCanvas() {   InitializeCompone

  • OpenCV实现鼠标框选并显示框选区域

    本文实例为大家分享了OpenCV实现鼠标框选并显示框选区域的具体代码,供大家参考,具体内容如下 cvSetImageROI函数(基于给定的矩形设置图像的ROI(感兴趣区域,region of interesting)) void cvSetImageROI(IplImage* image,CvRect rect) 参数: image 图像头,待处理图像 rect ROI 感兴趣区域矩形 cvResetImageROI函数(释放基于给定的矩形设置图像的ROI(感兴趣区域,region of int

  • js/jq仿window文件夹框选操作插件

    0.先给大家看看效果: 1.创建一个index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{list-style: none} li{width:200px;margin:10px;float:left;height: 100

  • vue封装一个简单的div框选时间的组件的方法

    前言 新年第一篇文章,记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框选实现 div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div.[注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位.不然,鼠标框选区

  • JavaScript制作简单的框选图表

    故事背景:这几天遇到一个客户,是做会议记录的,每次会议过程中,都会有特定设备记录下讲话人的位置以角度值显示.他给我角度值,让我给他做一个图表来展示每个人的一个大概位置. 客户想到的是用 Echarts 图表来做,我首先想到的也是用 Echarts ,但是思考了他的要求以后,发现就一个简单的框选图表用 Echarts 来做是不是大材小用了,而且还要导入那么多的没用的代码. 于是我想到了用 canvas 画布来仿着做,但又考虑了一下, canvas 操作起来不顺手:究竟可不可以用普通的css结合 j

随机推荐