方法一：

<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;}

	h3{text-align: center;padding-bottom: 50px}

</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>

	<h3>°´ÏÂÊó±ê×ó¼ü²»·Å£¬¿òÑ¡²é¿´Ð§¹û</h3>

  <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>

<div class="fileDiv">file10</div>

<div class="fileDiv">file11</div>

<div class="fileDiv">file12</div>

<div class="fileDiv">file13</div>

<div class="fileDiv">file14</div>

<div class="fileDiv">file15</div>

<div class="fileDiv">file16</div>

<div class="fileDiv">file17</div> 

</body> 

</html>

方法二：

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=gbk">

    <title>拉框</title>

    <link href="css/jquery.ui.resizable.css" rel="stylesheet" />

    <style type="text/css">

        .ui-draggable-border {

            background: transparent;

            position: absolute;

            z-index: 100001;

            cursor: move;

        }

    </style>

</head>

<body>

    <div id="BottomRightCenterContentDiv" onmousedown="down(event)" onmouseup="up(event)" onmousemove="move(event)" style="left: 260px; width: 850px; height: 480px; visibility: visible; border: solid 1px blue;/*position:relative*/">

        <div id="div1" style="width: 120px; height: 120px; background-color: #b6ff00; left: 50px; top: 20px; position: absolute;"></div>

        <div id="div2" style="width: 120px; height: 120px; background-color: #FF99FF; left: 200px; top: 200px; position: absolute;"></div>

        <div id="div3" style="width: 120px; height: 120px; background-color: #ffd800; left: 20px; top: 300px; position: absolute;"></div>

        <div id="div4" style="width: 120px; height: 120px; background-color: #ffd800; left: 420px; top: 60px; position: absolute;"></div>

        <div id="div5" style="width: 120px; height: 120px; background-color: #871c1c; left: 620px; top: 240px; position: absolute;"></div>

        <div id="div6" style="width: 120px; height: 120px; background-color: #16DACA; left: 420px; top: 330px; position: absolute;"></div>

        <div id="div7" style="width: 120px; height: 120px; background-color: #b200ff; left: 660px; top: 70px; position: absolute;"></div>

        <div id="rect" style="position: absolute; background-color: rgb(195, 213, 237); opacity: 0.6; border: 1px dashed rgb(0, 153, 255); display: none;">

        </div>

    </div>

    <script src="js/jquery.js"></script>

    <script src="js/RectSelect.js"></script>

</body>

</html>

RectSelect.js：
// 是否需要(允许)处理鼠标的移动事件,默认识不处理

var select = false;

// 设置默认值,目的是隐藏图层

$("#rect").css("width", "0px;");

$("#rect").css("height", "0px;");

//让你要画的图层位于最上层

$("#rect").css("z-index", "10000000");

// 记录鼠标按下时的坐标

var startX = 0;

var startY = 0;

// 记录鼠标抬起时候的坐标

var endX = startX;

var endY = startY;

var rectItems;

//处理鼠标按下事件

function down(event) {

    var obj = window.event ? event.srcElement : evt.target;

    if (obj.id == "BottomRightCenterContentDiv") {

        //重置容器框初始样式

        $("#rect").attr("style", "position: absolute; background-color: rgb(195, 213, 237);opacity:0.6;border: 1px dashed rgb(0, 153, 255);");

        $("#rect").empty();

        //清空框选中的项

        if (rectItems)

            rectItems.length = 0;

        // 鼠标按下时才允许处理鼠标的移动事件

        select = true;

        // 取得鼠标按下时的坐标位置

        startX = event.clientX;

        startY = event.clientY;

        //startX = event.offsetX;

        //startY = event.offsetY;

        //设置你要画的矩形框的起点位置

        $("#rect").offset().left = startX;

        $("#rect").offset().top = startY;

        //$("#rect").css("left", startX);

        //$("#rect").css("top", startY);

    }

}

//鼠标抬起事件

function up(event) {

    if (select) {

        var w = $("#rect").width();

        var h = $("#rect").height();

        if (w > 10 && h > 10) {

            $("#rect").css("display", "block");

            rectItems = new Array();

            //查找被框选中的元素  ------start

            var obj = $("#BottomRightCenterContentDiv");

            var childs = obj.children();

            for (var i = 0; i < childs.length; i++) {

                if (childs[i].id == "rect") {

                    continue;

                } else {

                    var x = 0, y = 0;

                    var child = $("#" + childs[i].id);

                    var childleft = child.offset().left;

                    var childtop = child.offset().top;

                    //var childleft = parseInt(child.css("left").replace("px", ""));

                    //var childtop = parseInt(child.css("top").replace("px", ""));

                    x = childleft;

                    y = childtop;

                    var rectleft = parseInt($("#rect").css("left").replace("px", ""));

                    var recttop = parseInt($("#rect").css("top").replace("px", ""));

                    if (x > rectleft && y > recttop && (x + child.width()) < (rectleft + $("#rect").width()) &&

                        (y + child.height()) < (recttop + $("#rect").height())) {

                        rectItems.push(childs[i]);

                        if (child.hasClass("PanelSty_Checked")) {

                            child.removeClass("PanelSty_Checked");

                            child.find("#ui-resizable-nw").removeClass("ui-resizable-nw");

                            child.find("#ui-resizable-n").removeClass("ui-resizable-n");

                            child.find("#ui-resizable-ne").removeClass("ui-resizable-ne");

                            child.find("#ui-resizable-e").removeClass("ui-resizable-n");

                            child.find("#ui-resizable-se").removeClass("ui-resizable-se");

                            child.find("#ui-resizable-s").removeClass("ui-resizable-s");

                            child.find("#ui-resizable-sw").removeClass("ui-resizable-sw");

                            child.find("#ui-resizable-sw").removeClass("ui-resizable-sw");

                            child.find("#ui-resizable-w").removeClass("ui-resizable-w");

                        }

                    }

                }

            }

            //查找被框选中的元素  ------end

            //重新设置框选容器的大小、位置，并将被框选中的元素移入框选容器   -------start

            if (rectItems.length > 0) {

                var left = 0, top = 0, maxW = 0, minW = 0, maxH = 0, minH = 0;

                for (var i = 0; i < rectItems.length; i++) {

                    var item = $("#" + rectItems[i].id);

                    var itemleft = item.offset().left;

                    var itemtop = item.offset().top;

                    //var itemleft = parseInt(item.css("left").replace("px", ""));

                    //var itemtop = parseInt(item.css("top").replace("px", ""));

                    if (i != 0) {

                        if (itemleft <= left)

                            left = itemleft;

                        if (itemtop <= top)

                            top = itemtop;

                        if ((itemleft + item.width()) >= maxW)

                            maxW = itemleft + item.width();

                        if (itemleft <= minW)

                            minW = itemleft;

                        if ((itemtop + item.height()) >= maxH)

                            maxH = itemtop + item.height();

                        if (itemtop <= minH)

                            minH = itemtop;

                    }

                    else {

                        left = itemleft;

                        top = itemtop;

                        maxW = itemleft + item.width();

                        minW = left;

                        maxH = itemtop + item.height();

                        minH = top;

                    }

                }

                $("#rect").css("left", left);

                $("#rect").css("top", top);

                $("#rect").width(Math.abs(maxW - minW));

                $("#rect").height(Math.abs(maxH - minH));

            } else {

                $("#rect").css("display", "none");

            }

            //重新设置框选容器的大小、位置，并将被框选中的元素移入框选容器   -------end

        } else {

            $("#rect").css("display", "none");

        }

    }

    //鼠标抬起,就不允许在处理鼠标移动事件

    select = false;

    AddBorder($("#rect"));

}

//鼠标移动事件,最主要的事件

function move(event) {

    /*

    这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,

    我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.

    */

    if (select) {

        // 取得鼠标移动时的坐标位置

        endX = event.clientX;

        endY = event.clientY;

        //endX = event.offsetX;

        //endY = event.offsetY;

        var r = $("#rect");

        // 设置拉框的大小

        $("#rect").width(Math.abs(endX - startX));

        $("#rect").height(Math.abs(endY - startY));

        $("#rect").css("display", "block");

        // A part

        if (endX < startX && endY < startY) {

            $("#rect").css("left", endX);

            $("#rect").css("top", endY);

        }

        // B part

        if (endX > startX && endY < startY) {

            $("#rect").css("left", startX);

            $("#rect").css("top", endY);

        }

        // C part

        if (endX < startX && endY > startY) {

            $("#rect").css("left",endX);

            $("#rect").css("top", startY);

        }

        // D part

        if (endX > startX && endY > startY) {

            $("#rect").css("left", startX);

            $("#rect").css("top", startY);

        }

        /*

        这两句代码是最重要的,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,

        拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.

        这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,

        这两行代码是拉框最核心的部分.

        */

        window.event.cancelBubble = true;

        window.event.returnValue = false;

    }

}

function AddBorder(obj) {

    $(obj).append($('<div id="ui-draggable-e1" class="ui-draggable-border" style="height: 100%; width: 5px;  right:0px;bottom: 0px; "></div>'));

    $(obj).append($('<div id="ui-draggable-n1" class="ui-draggable-border" style="height: 5px; width: 100%;  top:0px;"></div>'));

    $(obj).append($('<div id="ui-draggable-w1" class="ui-draggable-border" style="height: 100%; width: 5px; bottom: 0px;"></div>'));

    $(obj).append($('<div id="ui-draggable-s1" class="ui-draggable-border" style="height: 5px; width: 100%; bottom:0px;"></div>'));

    $(obj).append($('<div id="ui-resizable-e" class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>'));

    $(obj).append($('<div id="ui-resizable-s" class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>'));

    $(obj).append($('<div id="ui-resizable-se" class="ui-resizable-handle ui-resizable-se" style="z-index: 1000;"></div>'));

    $(obj).append($('<div id="ui-resizable-n" class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>'));

    $(obj).append($('<div id="ui-resizable-w" class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>'));

    $(obj).append($('<div id="ui-resizable-ne" class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>'));

    $(obj).append($('<div id="ui-resizable-nw" class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>'));

    $(obj).append($('<div id="ui-resizable-sw" class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>'));

}

$(function () {

    $("#rect").draggable('enable');

    $("#rect").draggable({

        handle: "#rect",

        containment: "parent",

        scroll: false,

        start: function (event, ui) {

            begintop = $(this).offset().top;

            beginleft = $(this).offset().left;

        },

        drag: function (event, ui) {

            var endtop = ui.position.top;

            var endleft = ui.position.left;

            topdiff = endtop - begintop;

            leftdiff = endleft - beginleft;

        },

        stop: function (event, ui) {

            //重新设置容器框内元素位置

            if (rectItems) {

                for (var i = 0; i < rectItems.length; i++) {

                    var item = $("#" + rectItems[i].id);

                    item.css("top", item.offset().top + topdiff);

                    item.css("left", item.offset().left + leftdiff);

                }

            }

        }

    });

});

　　

js实现鼠标拖动框选元素小狗的更多相关文章

  1. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  2. 【JS学习笔记】第一个JS效果——鼠标提示框

    分析效果实现原理--鼠标提示框 样式:div的display 事件:onmouseover,onmouseout 编写JS的流程 布局:HTML+CSS 属性:确定需要修改哪些属性 事件:确定用户做哪 ...

  3. js 获取 鼠标位置 和获取元素位置

    ]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...

  4. JS-slider.js实现鼠标拖动滑块控制取值特效

    制作效果,如下图,鼠标点击颜色标能左右拖动并设置文本框中的值 源码: <div id="example"> <div id="slideContaine ...

  5. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  6. js 模拟鼠标拖动

    window.addEventListener('message', function (event) { if (event.source != window) return; if (event. ...

  7. JavaScript实现框选效果

    <html> <head> <title>region</title> <style> body { margin: 0; padding: ...

  8. Cesium实现右键框选

    思路 1.先取消地图的右键事件 2.右键框选事件,屏幕坐标转为经纬度坐标 取消地图的右键事件 //此处容易犯一个错误:以为右键事件绑定了缩放功能,伪代码即 Cesium.MouseEvent.右键事件 ...

  9. Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

    元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...

随机推荐

  1. js和css

    body{height:100%;background-image:url(./img/background.png);}  宽度同理 body的高度适应屏幕大小设置成  height:100%; 前 ...

  2. docker容器中安装vim 、telnet、ifconfig, ping命令

    在使用docker容器时,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要安装vim,可是当你敲apt-get install vim命令时 ...

  3. NIO 中的读和写

    概述 读和写是I/O的基本过程.从一个通道中读取很简单:只需创建一个缓冲区,然后让通道将数据读到这个缓冲区中.写入也相当简单:创建一个缓冲区,用数据填充它,然后让通道用这些数据来执行写入操作. 从文件 ...

  4. [HDU1392]Surround the Trees

    思路: 凸包模板题. 注意n=1和n=2的情况. 当n=1时,不需要绳子. 当n=2时,绳子长度为两棵树之间距离. 当n≥e时,Graham求凸包即可.最后将凸包上的所有相邻点距离求和. #inclu ...

  5. crm的知识点整理

    ''' # 1. 通过ChangeList封装好多数据 # 2. 销售中公共资源:Q查询,3天 15天 from django.db.models import F,Q F 使用查询条件的值,专门取对 ...

  6. zabbix 官方文档

    https://www.zabbix.com/documentation/3.4/manual

  7. [原创]Network Emulator for Windows Toolkit使用介绍

    [原创]Network Emulator for Windows Toolkit使用介绍 1 Network Emulator for Windows Toolkit简介 微软在window系统下,可 ...

  8. Spring中 @Autowired标签与 @Resource标签 的区别(转)

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...

  9. AngularJS中有关Directive的汇总

    本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...

  10. Android Studio 3.1 正式版

    欢迎大家推荐自己在Android开发过程中用的好用的工具.学习开发教程.用到设计素材.如果你觉得本站对你有用,你可以点击底部的分享按钮,把本站分享到社交网络让你的小伙伴和更多的人知道. 或者可以考虑捐 ...