js实现鼠标拖动框选元素小狗
2017-07-04 10:57
501 查看
方法一：
方法二：
<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函数
- js 实现鼠标拖动的div层
- js实现图片滚轮放大缩小以及鼠标拖动
- JS实现超简单的鼠标拖动效果
- JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
- 实现页面元素拖动效果的JS函数
- js 实现鼠标按下 拖动div
- JS拖动鼠标画出方框实现鼠标选区的方法
- js实现鼠标拖动控制td宽度
- JS实现超简单的鼠标拖动效果
- js 鼠标拖动对象 可让任何div实现拖动效果
- JavaScript 实现鼠标拖动元素实例代码
- js实现鼠标拖动图片 兼容IE，FF火狐，谷歌浏览器
- JS拖动鼠标画出方框实现鼠标选区的方法
- 用js实现鼠标拖动控制td宽度
- Js 实现鼠标拖动浮动层
- JavaScript 实现鼠标拖动元素
- JavaScript 实现鼠标拖动元素实例代码
- JS响应鼠标点击实现两个滑块区间拖动效果