js实现鼠标拖动框选元素小狗

方法一：

<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实现鼠标拖动框选元素小狗的更多相关文章

Javascript实现鼠标框选元素后拖拽被框选的元素
之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果框选后的内容可以拖拽,如下图: 代码下载
【JS学习笔记】第一个JS效果——鼠标提示框
分析效果实现原理--鼠标提示框样式:div的display 事件:onmouseover,onmouseout 编写JS的流程布局:HTML+CSS 属性:确定需要修改哪些属性事件:确定用户做哪 ...
js 获取鼠标位置和获取元素位置
]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...
JS-slider.js实现鼠标拖动滑块控制取值特效
制作效果,如下图,鼠标点击颜色标能左右拖动并设置文本框中的值源码: <div id="example"> <div id="slideContaine ...
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠 ...
js 模拟鼠标拖动
window.addEventListener('message', function (event) { if (event.source != window) return; if (event. ...
JavaScript实现框选效果
<html> <head> <title>region</title> <style> body { margin: 0; padding: ...
Cesium实现右键框选
思路 1.先取消地图的右键事件 2.右键框选事件,屏幕坐标转为经纬度坐标取消地图的右键事件 //此处容易犯一个错误:以为右键事件绑定了缩放功能,伪代码即 Cesium.MouseEvent.右键事件 ...
Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载
元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...

随机推荐

OSX 10.13 以后实现终端FTP命令(转)
macOS10.13 以后就没了........ 这样操作亲测可以恢复 1,brew install telnet 2,brew install inetutils 3,brew link --ove ...
Python常用模块--json
官方解释: JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.人类很容易读写.机器很容易解析和生成.它基于 JavaScript编程语言的一部分, 标准ECM ...
tensorflow 使用CPU而不使用GPU的问题解决
今天发现一个怪现象,在训练keras时,发现不使用GPU进行计算,而是采用CPU进行计算,导致计算速度很慢. 用如下代码可检测tensorflow的能使用设备情况: from tensorflow.p ...
Cocos2d-X开发教程-捕鱼达人 Cocos2-x development tutorial - fishing talent
Cocos2d-X开发教程-捕鱼达人 Cocos2-x development tutorial - fishing talent 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱 ...
潭州课堂25班：Ph201805201 第十课类的定义，属性和方法 (课堂笔记)
类的定义共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
JavaScript_几种创建对象(2017-07-04)
理解对象 1.创建Object实例 var clock = new Object(); clock.hour = 12; clock.minute = 10; clock.showHour = fun ...
CocosCreator编辑器界面
1,资源管理器[参考来源:官方文档] 资源管理器里显示了项目资源文件夹(assets)中的所有资源.这里会以树状结构显示文件夹并自动同步在操作系统中对项目资源文件夹内容的修改.您可以将文件从项目外面 ...
迭代函数：zip、enumerate，list解析
#encoding:utf-8 """ 并行迭代: zip enumerate 获取元素及下标 list解析 iter """ #zip # ...
基本数据类型、包装类、String之间的转换
package 包装类; /** *8种基本数据类型对应一个类,此类即为包装类 * 基本数据类型.包装类.String之间的转换 * 1.基本数据类型转成包装类(装箱): * ->通过构造器 : ...
ALSA学习资料
一.内核文档 Linux Sound Subsystem Documentation 二.一些API 1.snd_pcm_period_elapsed 2.snd_pcm_lib_buffer_by ...

js实现鼠标拖动框选元素小狗

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

随机推荐

热门专题