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

2024-09-29 16:21:01

本文实例为大家分享了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>

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

javascript实现鼠标选取拖动或Ctrl选取拖动

*{position:absolute;} #panel *{border:1px solid gray} /**********判断浏览器**********/ var isIE = false; if(document.all) isIE = true; /*******HashArray*******/ function HashArray(){ this.keyList = new Array(); this.put = function(key, value){ this[key] =
当鼠标滑过文本框自动选中输入框内容的JS代码分享

复制代码代码如下: <html><head><title>响应鼠标自动选中文本框内容</title></head><body><input id="a" type="text" value="请输入搜索词" onmouseover="selectInputContent(this.id)"/><script type="tex
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
用javascript实现鼠标框选

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

加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直
js实现鼠标点击文本框自动选中内容的方法

本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click
JavaScript简单实现鼠标拖动选择功能

复制代码代码如下: <style><!--body{padding-top:50px;padding-left:100px;padding-right:150px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;}
JS拖动鼠标画出方框实现鼠标选区的方法

本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作为上传头像时裁切选择图片,在头像裁切中使用广泛,鼠标在图片上拖动拉出一个方框,这个方框就代表着选区的功能,目前网页上已流行的一种操作.主要是依赖于JavaScript代码来实现. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
javascript实现淡蓝色的鼠标拖动选择框实例

本文实例讲述了javascript实现淡蓝色的鼠标拖动选择框.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
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
基于Fixed定位的框选功能的实现代码

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

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

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

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

相关推荐

随机推荐

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