zoukankan html css js c++ java

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

方法一：

<html> 

<head></head> 

<style> 

body{padding:100px;} 

.fileDiv{float:left;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;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 + "
"; 

    } 

  } 

  alert("¹²Ñ¡Ôñ " + count + " ¸öÎÄ¼þ£¬·Ö±ðÊÇ£º
" + 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;  850px; height: 480px; visibility: visible; border: solid 1px blue;/*position:relative*/">
        <div id="div1" style=" 120px; height: 120px; background-color: #b6ff00; left: 50px; top: 20px; position: absolute;"></div>
        <div id="div2" style=" 120px; height: 120px; background-color: #FF99FF; left: 200px; top: 200px; position: absolute;"></div>
        <div id="div3" style=" 120px; height: 120px; background-color: #ffd800; left: 20px; top: 300px; position: absolute;"></div>
        <div id="div4" style=" 120px; height: 120px; background-color: #ffd800; left: 420px; top: 60px; position: absolute;"></div>
        <div id="div5" style=" 120px; height: 120px; background-color: #871c1c; left: 620px; top: 240px; position: absolute;"></div>
        <div id="div6" style=" 120px; height: 120px; background-color: #16DACA; left: 420px; top: 330px; position: absolute;"></div>
        <div id="div7" style=" 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%;  5px;  right:0px;bottom: 0px; "></div>'));
    $(obj).append($('<div id="ui-draggable-n1" class="ui-draggable-border" style="height: 5px;  100%;  top:0px;"></div>'));
    $(obj).append($('<div id="ui-draggable-w1" class="ui-draggable-border" style="height: 100%;  5px; bottom: 0px;"></div>'));
    $(obj).append($('<div id="ui-draggable-s1" class="ui-draggable-border" style="height: 5px;  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);
                }
            }
        }
    });
});

查看全文

相关阅读:
jQuery.hover() 函数详解
 深入了解css的行高Line Height属性
 yii2 restfulapi QueryParamAuth验证
 yii2 restfulapi 的配置和访问
 yii2 urlmanager的配置
 xubuntu install nodejs
使用Putty连接VirtualBox的Ubuntu
mvc与mvvm
对二叉树进行广度优先遍历
 JavaScript 中的 FileReader

原文地址：https://www.cnblogs.com/dearxinli/p/7115563.html