学习啦 > 学习电脑 > 电脑硬件知识 > 键盘鼠标 > jst实现鼠标拖动选择功能

jst实现鼠标拖动选择功能

时间: 沈迪豪908 分享

jst实现鼠标拖动选择功能

  学习前端的同学你们知道怎么用JavaScript简单实现鼠标拖动选择功能吗?不知道的话跟着学习啦小编一起来学习用JavaScript简单实现鼠标拖动选择功能。

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

  .seled{border:1px solid #ff0000;background-color:#D6DFF7;}

  --></style>

  <script type="text/javascript">// <![CDATA[

  Array.prototype.remove = function( item ){

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

  if( item == this[i] )

  break;

  }

  if( i == this.length )

  return;

  for( var j = i ; j < this.length - 1 ; j++ ){

  this[ j ] = this[ j + 1 ];

  }

  this.length--;

  }

  String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);}

  function getAllChildren(e) {

  return e.all ? e.all : e.getElementsByTagName('*');

  }

  document.getElementsBySelector = function(selector) {

  if (!document.getElementsByTagName) {

  return new Array();

  }

  var tokens = selector.split(' ');

  var currentContext = new Array(document);

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

  token = tokens[i].replace(/^s+/,'').replace(/s+$/,'');;

  if (token.indexOf('#') > -1) {

  var bits = token.split('#');

  var tagName = bits[0];

  var id = bits[1];

  var element = document.getElementById(id);

  if (tagName && element.nodeName.toLowerCase() != tagName) {

  return new Array();

  }

  currentContext = new Array(element);

  continue;

  }

  if (token.indexOf('.') > -1) {

  var bits = token.split('.');

  var tagName = bits[0];

  var className = bits[1];

  if (!tagName) {

  tagName = '*';

  }

  var found = new Array;

  var foundCount = 0;

  for (var h = 0; h < currentContext.length; h++) {

  var elements;

  if (tagName == '*') {

  elements = getAllChildren(currentContext[h]);

  } else {

  elements = currentContext[h].getElementsByTagName(tagName);

  }

  for (var j = 0; j < elements.length; j++) {

  found[foundCount++] = elements[j];

  }

  }

  currentContext = new Array;

  var currentContextIndex = 0;

  for (var k = 0; k < found.length; k++) {

  if (found[k].className && found[k].className.match(new RegExp('b'+className+'b'))) {

  currentContext[currentContextIndex++] = found[k];

  }

  }

  continue;

  }

  if (token.match(/^(w*)[(w+)([=~|^$*]?)=?"?([^]"]*)"?]$/)) {

  var tagName = RegExp. class="main">

学习啦 > 学习电脑 > 电脑硬件知识 > 键盘鼠标 > jst实现鼠标拖动选择功能

jst实现鼠标拖动选择功能

时间: 沈迪豪908 分享

  var attrName = RegExp.

jst实现鼠标拖动选择功能

  学习前端的同学你们知道怎么用JavaScript简单实现鼠标拖动选择功能吗?不知道的话跟着学习啦小编一起来学习用JavaScript简单实现鼠标拖动选择功能。

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

  .seled{border:1px solid #ff0000;background-color:#D6DFF7;}

  --></style>

  <script type="text/javascript">// <![CDATA[

  Array.prototype.remove = function( item ){

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

  if( item == this[i] )

  break;

  }

  if( i == this.length )

  return;

  for( var j = i ; j < this.length - 1 ; j++ ){

  this[ j ] = this[ j + 1 ];

  }

  this.length--;

  }

  String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);}

  function getAllChildren(e) {

  return e.all ? e.all : e.getElementsByTagName('*');

  }

  document.getElementsBySelector = function(selector) {

  if (!document.getElementsByTagName) {

  return new Array();

  }

  var tokens = selector.split(' ');

  var currentContext = new Array(document);

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

  token = tokens[i].replace(/^s+/,'').replace(/s+$/,'');;

  if (token.indexOf('#') > -1) {

  var bits = token.split('#');

  var tagName = bits[0];

  var id = bits[1];

  var element = document.getElementById(id);

  if (tagName && element.nodeName.toLowerCase() != tagName) {

  return new Array();

  }

  currentContext = new Array(element);

  continue;

  }

  if (token.indexOf('.') > -1) {

  var bits = token.split('.');

  var tagName = bits[0];

  var className = bits[1];

  if (!tagName) {

  tagName = '*';

  }

  var found = new Array;

  var foundCount = 0;

  for (var h = 0; h < currentContext.length; h++) {

  var elements;

  if (tagName == '*') {

  elements = getAllChildren(currentContext[h]);

  } else {

  elements = currentContext[h].getElementsByTagName(tagName);

  }

  for (var j = 0; j < elements.length; j++) {

  found[foundCount++] = elements[j];

  }

  }

  currentContext = new Array;

  var currentContextIndex = 0;

  for (var k = 0; k < found.length; k++) {

  if (found[k].className && found[k].className.match(new RegExp('b'+className+'b'))) {

  currentContext[currentContextIndex++] = found[k];

  }

  }

  continue;

  }

  if (token.match(/^(w*)[(w+)([=~|^$*]?)=?"?([^]"]*)"?]$/)) {

  var tagName = RegExp.$1;

  var attrName = RegExp.$2;

  var attrOperator = RegExp.$3;

  var attrValue = RegExp.$4;

  if (!tagName) {

  tagName = '*';

  }

  var found = new Array;

  var foundCount = 0;

  for (var h = 0; h < currentContext.length; h++) {

  var elements;

  if (tagName == '*') {

  elements = getAllChildren(currentContext[h]);

  } else {

  elements = currentContext[h].getElementsByTagName(tagName);

  }

  for (var j = 0; j < elements.length; j++) {

  found[foundCount++] = elements[j];

  }

  }

  currentContext = new Array;

  var currentContextIndex = 0;

  var checkFunction;

  switch (attrOperator) {

  case '=':

  checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };

  break;

  case '~':

  checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('b'+attrValue+'b'))); };

  break;

  case '|':

  checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };

  break;

  case '^':

  checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };

  break;

  case '$':

  checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };

  break;

  case '*':

  checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };

  break;

  default :

  checkFunction = function(e) { return e.getAttribute(attrName); };

  }

  currentContext = new Array;

  var currentContextIndex = 0;

  for (var k = 0; k < found.length; k++) {

  if (checkFunction(found[k])) {

  currentContext[currentContextIndex++] = found[k];

  }

  }

  continue;

  }

  tagName = token;

  var found = new Array;

  var foundCount = 0;

  for (var h = 0; h < currentContext.length; h++) {

  var elements = currentContext[h].getElementsByTagName(tagName);

  for (var j = 0; j < elements.length; j++) {

  found[foundCount++] = elements[j];

  }

  }

  currentContext = found;

  }

  return currentContext;

  }

  function addEvent(eventType,eventFunc,eventObj){

  eventObj = eventObj || document;

  if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc);

  if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false);

  }

  function clearEventBubble(evt){

  evt = evt || window.event;

  if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true;

  if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false;

  }

  function posXY(event){

  event = event || window.event;

  var posX = event.pageX || (event.clientX +

  (document.documentElement.scrollLeft || document.body.scrollLeft));

  var posY = event.pageY || (event.clientY +

  (document.documentElement.scrollTop || document.body.scrollTop));

  return {x:posX, y:posY};

  }

  var _selectedRegions = [];

  function RegionSelect(selRegionProp){

  this.regions =[];

  var _regions = document.getElementsBySelector(selRegionProp["region"]);

  if(_regions && _regions.length > 0){

  var _self = this;

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

  _regions[i].onmousedown = function(){

  var evt = window.event || arguments[0];

  if(!evt.shiftKey && !evt.ctrlKey){

  // 清空所有select样式

  _self.clearSelections(_regions);

  this.className += " "+_self.selectedClass;

  // 清空selected数组,并加入当前select中的元素

  _selectedRegions = [];

  _selectedRegions.push(this);

  }else{

  if(this.className.indexOf(_self.selectedClass) == -1){

  this.className += " "+_self.selectedClass;

  _selectedRegions.push(this);

  }else{

  this.className = this.className.replaceAll(_self.selectedClass,"");

  _selectedRegions.remove(this);

  }

  }

  clearEventBubble(evt);

  }

  this.regions.push(_regions[i]);

  }

  }

  this.selectedClass = selRegionProp["selectedClass"];

  this.selectedRegion = [];

  this.selectDiv = null;

  this.startX = null;

  this.startY = null;

  }

  RegionSelect.prototype.select = function(){

  var _self = this;

  addEvent("mousedown",function(){

  var evt = window.event || arguments[0];

  _self.onBeforeSelect(evt);

  clearEventBubble(evt);

  },document);

  addEvent("mousemove",function(){

  var evt = window.event || arguments[0];

  _self.onSelect(evt);

  clearEventBubble(evt);

  },document);

  addEvent("mouseup",function(){

  _self.onEnd();

  },document);

  }

  RegionSelect.prototype.onBeforeSelect = function(evt){

  if(!document.getElementById("selContainer")){

  this.selectDiv = document.createElement("div");

  this.selectDiv.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;";

  this.selectDiv.id = "selContainer";

  document.body.appendChild(this.selectDiv);

  }else{

  this.selectDiv = document.getElementById("selContainer");

  }

  this.startX = posXY(evt).x;

  this.startY = posXY(evt).y;

  this.isSelect = true;

  }

  RegionSelect.prototype.onSelect = function(evt){

  var _self = this;

  if(_self.isSelect){

  if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = "";

  var posX = posXY(evt).x;

  var poxY = posXY(evt).y;

  _self.selectDiv.style.left = Math.min(posX, this.startX);

  _self.selectDiv.style.top = Math.min(poxY, this.startY);

  _self.selectDiv.style.width = Math.abs(posX - this.startX);

  _self.selectDiv.style.height = Math.abs(poxY - this.startY);

  var regionList = _self.regions;

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

  var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r);

  if(sr && r.className.indexOf(_self.selectedClass) == -1){

  r.className = r.className + " "+_self.selectedClass;

  _selectedRegions.push(r);

  }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){

  r.className = r.className.replaceAll(_self.selectedClass,"");

  _selectedRegions.remove(r);

  }

  }

  }

  }

  RegionSelect.prototype.onEnd = function(){

  if(this.selectDiv){

  this.selectDiv.style.display = "none";

  }

  this.isSelect = false;

  //_selectedRegions = this.selectedRegion;

  }

  // 判断一个区域是否在选择区内

  RegionSelect.prototype.innerRegion = function(selDiv, region){

  var s_top = parseInt(selDiv.style.top);

  var s_left = parseInt(selDiv.style.left);

  var s_right = s_left + parseInt(selDiv.offsetWidth);

  var s_bottom = s_top + parseInt(selDiv.offsetHeight);

  var r_top = parseInt(region.offsetTop);

  var r_left = parseInt(region.offsetLeft);

  var r_right = r_left + parseInt(region.offsetWidth);

  var r_bottom = r_top + parseInt(region.offsetHeight);

  var t = Math.max(s_top, r_top);

  var r = Math.min(s_right, r_right);

  var b = Math.min(s_bottom, r_bottom);

  var l = Math.max(s_left, r_left);

  if (b > t+5 && r > l+5) {

  return region;

  } else {

  return null;

  }

  }

  RegionSelect.prototype.clearSelections = function(regions){

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

  regions[i].className = regions[i].className.replaceAll(this.selectedClass,"");

  }

  }

  function getSelectedRegions(){

  return _selectedRegions;

  }

  function showSelDiv(){

  var selInfo = "";

  var arr = getSelectedRegions();

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

  selInfo += arr[i].innerHTML+"n";

  }

  alert("共选择 "+arr.length+" 个文件,分别是:n"+selInfo);

  }

  // ]]></script>

  <p><button onclick="showSelDiv();">getRegions</button></p>

  <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 style="float: left; width: 100%;"><button onclick="showSelDiv();">getRegions</button></div>

  <script type="text/javascript">// <![CDATA[

  new RegionSelect({

  region:'div.fileDiv',

  selectedClass: 'seled'

  }).select();

  // ]]></script>

猜你喜欢:

1.html调用js方法

2.id调用js方法

3.怎么用js实现简单鼠标跟随效果

4.lol上单JS强势来袭

5.使用js实现鼠标点击变色

6.js中构造函数是什么

7.JavaScript和JSP的区别

;

  var attrOperator = RegExp.;

  var attrValue = RegExp.;

  if (!tagName) {

  tagName = '*';

  }

  var found = new Array;

  var foundCount = 0;

  for (var h = 0; h < currentContext.length; h++) {

  var elements;

  if (tagName == '*') {

  elements = getAllChildren(currentContext[h]);

  } else {

  elements = currentContext[h].getElementsByTagName(tagName);

  }

  for (var j = 0; j < elements.length; j++) {

  found[foundCount++] = elements[j];

  }

  }

  currentContext = new Array;

  var currentContextIndex = 0;

  var checkFunction;

  switch (attrOperator) {

  case '=':

  checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };

  break;

  case '~':

  checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('b'+attrValue+'b'))); };

  break;

  case '|':

  checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };

  break;

  case '^':

  checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };

  break;

  case '$':

  checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };

  break;

  case '*':

  checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };

  break;

  default :

  checkFunction = function(e) { return e.getAttribute(attrName); };

  }

  currentContext = new Array;

  var currentContextIndex = 0;

  for (var k = 0; k < found.length; k++) {

  if (checkFunction(found[k])) {

  currentContext[currentContextIndex++] = found[k];

  }

  }

  continue;

  }

  tagName = token;

  var found = new Array;

  var foundCount = 0;

  for (var h = 0; h < currentContext.length; h++) {

  var elements = currentContext[h].getElementsByTagName(tagName);

  for (var j = 0; j < elements.length; j++) {

  found[foundCount++] = elements[j];

  }

  }

  currentContext = found;

  }

  return currentContext;

  }

  function addEvent(eventType,eventFunc,eventObj){

  eventObj = eventObj || document;

  if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc);

  if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false);

  }

  function clearEventBubble(evt){

  evt = evt || window.event;

  if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true;

  if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false;

  }

  function posXY(event){

  event = event || window.event;

  var posX = event.pageX || (event.clientX +

  (document.documentElement.scrollLeft || document.body.scrollLeft));

  var posY = event.pageY || (event.clientY +

  (document.documentElement.scrollTop || document.body.scrollTop));

  return {x:posX, y:posY};

  }

  var _selectedRegions = [];

  function RegionSelect(selRegionProp){

  this.regions =[];

  var _regions = document.getElementsBySelector(selRegionProp["region"]);

  if(_regions && _regions.length > 0){

  var _self = this;

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

  _regions[i].onmousedown = function(){

  var evt = window.event || arguments[0];

  if(!evt.shiftKey && !evt.ctrlKey){

  // 清空所有select样式

  _self.clearSelections(_regions);

  this.className += " "+_self.selectedClass;

  // 清空selected数组,并加入当前select中的元素

  _selectedRegions = [];

  _selectedRegions.push(this);

  }else{

  if(this.className.indexOf(_self.selectedClass) == -1){

  this.className += " "+_self.selectedClass;

  _selectedRegions.push(this);

  }else{

  this.className = this.className.replaceAll(_self.selectedClass,"");

  _selectedRegions.remove(this);

  }

  }

  clearEventBubble(evt);

  }

  this.regions.push(_regions[i]);

  }

  }

  this.selectedClass = selRegionProp["selectedClass"];

  this.selectedRegion = [];

  this.selectDiv = null;

  this.startX = null;

  this.startY = null;

  }

  RegionSelect.prototype.select = function(){

  var _self = this;

  addEvent("mousedown",function(){

  var evt = window.event || arguments[0];

  _self.onBeforeSelect(evt);

  clearEventBubble(evt);

  },document);

  addEvent("mousemove",function(){

  var evt = window.event || arguments[0];

  _self.onSelect(evt);

  clearEventBubble(evt);

  },document);

  addEvent("mouseup",function(){

  _self.onEnd();

  },document);

  }

  RegionSelect.prototype.onBeforeSelect = function(evt){

  if(!document.getElementById("selContainer")){

  this.selectDiv = document.createElement("div");

  this.selectDiv.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;";

  this.selectDiv.id = "selContainer";

  document.body.appendChild(this.selectDiv);

  }else{

  this.selectDiv = document.getElementById("selContainer");

  }

  this.startX = posXY(evt).x;

  this.startY = posXY(evt).y;

  this.isSelect = true;

  }

  RegionSelect.prototype.onSelect = function(evt){

  var _self = this;

  if(_self.isSelect){

  if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = "";

  var posX = posXY(evt).x;

  var poxY = posXY(evt).y;

  _self.selectDiv.style.left = Math.min(posX, this.startX);

  _self.selectDiv.style.top = Math.min(poxY, this.startY);

  _self.selectDiv.style.width = Math.abs(posX - this.startX);

  _self.selectDiv.style.height = Math.abs(poxY - this.startY);

  var regionList = _self.regions;

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

  var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r);

  if(sr && r.className.indexOf(_self.selectedClass) == -1){

  r.className = r.className + " "+_self.selectedClass;

  _selectedRegions.push(r);

  }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){

  r.className = r.className.replaceAll(_self.selectedClass,"");

  _selectedRegions.remove(r);

  }

  }

  }

  }

  RegionSelect.prototype.onEnd = function(){

  if(this.selectDiv){

  this.selectDiv.style.display = "none";

  }

  this.isSelect = false;

  //_selectedRegions = this.selectedRegion;

  }

  // 判断一个区域是否在选择区内

  RegionSelect.prototype.innerRegion = function(selDiv, region){

  var s_top = parseInt(selDiv.style.top);

  var s_left = parseInt(selDiv.style.left);

  var s_right = s_left + parseInt(selDiv.offsetWidth);

  var s_bottom = s_top + parseInt(selDiv.offsetHeight);

  var r_top = parseInt(region.offsetTop);

  var r_left = parseInt(region.offsetLeft);

  var r_right = r_left + parseInt(region.offsetWidth);

  var r_bottom = r_top + parseInt(region.offsetHeight);

  var t = Math.max(s_top, r_top);

  var r = Math.min(s_right, r_right);

  var b = Math.min(s_bottom, r_bottom);

  var l = Math.max(s_left, r_left);

  if (b > t+5 && r > l+5) {

  return region;

  } else {

  return null;

  }

  }

  RegionSelect.prototype.clearSelections = function(regions){

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

  regions[i].className = regions[i].className.replaceAll(this.selectedClass,"");

  }

  }

  function getSelectedRegions(){

  return _selectedRegions;

  }

  function showSelDiv(){

  var selInfo = "";

  var arr = getSelectedRegions();

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

  selInfo += arr[i].innerHTML+"n";

  }

  alert("共选择 "+arr.length+" 个文件,分别是:n"+selInfo);

  }

  // ]]></script>

  <p><button onclick="showSelDiv();">getRegions</button></p>

  <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 style="float: left; width: 100%;"><button onclick="showSelDiv();">getRegions</button></div>

  <script type="text/javascript">// <![CDATA[

  new RegionSelect({

  region:'div.fileDiv',

  selectedClass: 'seled'

  }).select();

  // ]]></script>

猜你喜欢:

1.html调用js方法

2.id调用js方法

3.怎么用js实现简单鼠标跟随效果

4.lol上单JS强势来袭

5.使用js实现鼠标点击变色

6.js中构造函数是什么

7.JavaScript和JSP的区别

1952176