Hello. Tell me, please, how using JavaScript to implement the ability to select several elements in a row with a mouse (as it happens in Windows, so that the selection area is still visible). Well, together with this, so that the selection works with one click, and while pressing the Ctrl key, the sequential selection of Html elements (CheckBox, Input). Plus one more thing: all elements with absolute positioning.
Without using any libraries, or with the participation of ExtJs no later than version 3.1 .

  • About "without libraries", IMHO, you are bent. At a minimum, you have to write your own, almost half of jQuery. - ling
  • Is it so hard? It's just that jQuery doesn't really work on top of ExtJs. - Anton Mukhin
  • Well, if you already have ExtJs, this already simplifies the task somewhat. But, unfortunately, in [official examples] [1] version 4 is used. In any case, I have not yet seen such interfaces without using third-party libraries. [1]: dev.sencha.com/deploy/ext-4.0.0/examples - ling
  • one
    Ling, you really turned down. =) Just need to learn the events: onmouseup, onmousedown, onmousemove; onkeypress; isctrlkey A bit of internalization of changes to CSS: element.style.width And a bit of recall of school geometry. - knes
  • @knes, all ingenious is simple. I hope that there are ready-made solutions or someone once did it. - Anton Mukhin

2 answers 2

 <html> <head> <style type="text/css"> .item{ border: #956d1d 1px solid; background: #ffd171; width: 100px; height: 20px; margin: 7px; float: left; text-align: center; } .item:hover{ border: #183376 1px solid; background: #7f97d4; border-bottom-width: 2px; margin-bottom: 6px; } .itemSelected{ border: #183376 1px solid; background: #6582c9; width: 100px; height: 20px; margin: 7px; float: left; text-align: center; } .itemSelected:hover{ border: #183376 1px solid; background: #7f97d4; border-bottom-width: 2px; margin-bottom: 6px; } #wlw{ width: 500px; height: 500px; overflow: scroll; } #selectFrame{ width: 0; height: 0; line-height: 0; border: 1px dotted #5c6a8e; background-color: #6582c9; position: absolute; z-index: 100; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: .4; } </style> <script> msdown = false; msx = 0; msy = 0; var selectedItems = new Array(); function disableSelection(target){ if (typeof target.onselectstart!="undefined") //IE route target.onselectstart=function(){return false} else if (typeof target.style.MozUserSelect!="undefined") //Firefox route target.style.MozUserSelect="none" else //All other route (ie: Opera) target.onmousedown=function(){return false} target.style.cursor = "default" } function coords(e){ var posx = 0; var posy = 0; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return new Array(posx,posy); } document.onmousedown = function(e){ if (!e) var e = window.event; msdown = true; var mousexy = coords(e); msx = mousexy[0]; msy = mousexy[1]; return false; } document.onmousemove = function(e){ var x1=0; var x2=0; var y1=0; var y2=0; var mousexy = coords(e); x1 = msx; y1 = msy; x2 = mousexy[0]; y2 = mousexy[1]; if (x1==x2){return;} if (y1==y2){return;} if (x1>x2){ x1 = x1+x2; x2 = x1-x2; x1 = x1-x2; } if (y1>y2){ y1 = y1+y2; y2 = y1-y2; y1 = y1-y2; } var sframe = document.getElementById('selectFrame'); sframe.style.top = y1; sframe.style.left = x1; sframe.style.width = x2-x1; sframe.style.height = y2-y1; sframe.style.visibility = msdown?'visible':'hidden'; } document.onmouseup = function(e){ if (!e) var e = window.event; msdown = false; var mousexy = coords(e); doSelection(msx,msy,mousexy[0],mousexy[1]); document.getElementById('selectFrame').style.visibility = msdown?'visible':'hidden'; } function doSelection(x1,y1,x2,y2){ if (x1==x2){return;} if (y1==y2){return;} if (x1>x2){ x1 = x1+x2; x2 = x1-x2; x1 = x1-x2; } if (y1>y2){ y1 = y1+y2; y2 = y1-y2; y1 = y1-y2; } selectedItems = new Array(); var wlw = document.getElementById('wlw'); for (var childItem in wlw.childNodes) { if (wlw.childNodes[childItem].nodeType == 1 && wlw.childNodes[childItem].id!='selectFrame'){ var item = wlw.childNodes[childItem]; if(item.offsetLeft>=x1 && item.offsetLeft<=x2 && item.offsetTop>=y1 && item.offsetTop<=y2){ selectedItems.push(item.id); item.className = 'itemSelected'; }else{ item.className = 'item'; } } } } function init(){ var wlw = document.getElementById('wlw'); for (var childItem in wlw.childNodes) { var item = wlw.childNodes[childItem]; if(item.nodeType == 1 && item.id!='selectFrame'){ item.onclick = function(e){ if (!e) var e = window.event; if(e.ctrlKey){ selectedItems.push(this.id); this.className = 'itemSelected'; } } } } } </script> </head> <body onload="init()"> <div id="wlw"> <div id='selectFrame'></div> <div class="item" id="0">cfcd2</div> <div class="item" id="1">c4ca4</div> <div class="item" id="2">c81e7</div> <div class="item" id="3">eccbc</div> <div class="item" id="4">a87ff</div> <div class="item" id="5">e4da3</div> <div class="item" id="6">16790</div> <div class="item" id="7">8f14e</div> <div class="item" id="8">c9f0f</div> <div class="item" id="9">45c48</div> </div> </body> </html>

Further cope?
None: unselect (when clicking again), ctrl + selection, shift + click

the first is implemented by additional checking the class before changing in the function init, onclick method the second - checking the pressing of the ctrl button when resetting the array

 selectedItems = new Array();

the third is the most difficult: it is necessary to start the cycle on the ID at the click, and remember the previous selected item.

  • And for Mozilla, you need to write something of your own? - Anton Mukhin
  • Well ... it worked for me in the screamer. The only thing is, there is an ugly cursor on the text, but this is corrected by styles. What is not working for you? - knes
  • Well, selection of several at once does not work. - Anton Mukhin
  • Aha, tochnyak: document.onmouseup = function (e) {I apologize. =) e missed. It's just that the 4th spreader spat on it. And the 3rd and 5th ones really didn’t get what to do with! Undefined - knes
  • Thank you so much! - Anton Mukhin

Possible implementation example

  • Well, this is part of a big task. - Anton Mukhin