How to make elements select-able using jquery

Question

I want to select list items when user clicks on them. But i don't want to use jQuery ui selectable. Please update my codes so that elements(only li) on my website can be selected just like in windows explorer.

  <ol id="browse-files">
    <li class="browse-file row">
      <div class="span6 file-name-col">timesNew.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">1.08MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
      <div class="span6 file-name-col">Photos.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">30.19MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
      <div class="span6 file-name-col">Docs.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">12.38MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
  </ol>

Here is the css

ol#browse-files {
    margin: 0;
    padding: 0;
    list-style: none;
}
ol#browse-files li {
    line-height: 40px;
    border-bottom: solid 1px #dcdcdc;
}
ol#browse-files li:hover {
    background-color: #dff0d8;
}
ol#browse-files li.active {
    background-color: #468847;
    color: #fff;
}

And jQuery codes goes here

$(document).ready(function() {
   $('ol#browse-files li').click(function(e) {
      if(e.ctrlKey){                                 //Select multiple files with ctrl
          $(this).toggleClass('active')
      } 

      else if($(this).hasClass('active')){
      $(this).toggleClass('active');
      } 

      else {
      $('ol#browse-files li').removeClass('active');
      $(this).addClass('active');
      }
   });

   $('.container:not(ol li)').click(function(e) {     // It works well without this but i want to deselect when user click anywhere else.
      $('ol#browse-files li').removeClass('active');
  });
});

Not sure what your question is. It looks like your code does what you want. — Barmar, Jul 19 '13 at 05:09
http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse http://stackoverflow.com/questions/4012785/jquery-is-there-a-way-to-highlight-the-text-of-a-div-when-you-click-on-it?rq=1 Above two links found, hope helpful. — Sameera Thilakasiri, Jul 19 '13 at 05:12
this is my fiddle. try it. http://jsfiddle.net/vonDy2791/6JTk2/ — Vond Ritz, Jul 19 '13 at 05:13
I don't want to select text. It should work like jQuery ui selectable [link](http://jqueryui.com/selectable/) but I don't to use jQuery ui. I want to develop my own lightweight method. — , Jul 19 '13 at 05:18

score 0 · Accepted Answer · answered Jul 19 '13 at 06:06

0

DEMO HERE

Use e.stopPropagation() to stop bubbling the click event upto the container;

$('ol#browse-files li').click(function (e) {
        e.stopPropagation();
        if (e.ctrlKey) { //Select multiple files with ctrl
            $(this).toggleClass('active');
        } else if ($(this).hasClass('active')) {
            $(this).toggleClass('active');
        } else {
            $('ol#browse-files li').removeClass('active');
            $(this).addClass('active');
        }
});

$(".container").not("ol li").click(function (e) { 
       $('ol#browse-files li').removeClass('active');
});

Now after selecting some li when you click on the container(the grey area), the selection will be removed as you desired

answered Jul 19 '13 at 06:06

Anupam

7,966
3
41
63

Thanks @anu, it works. Can you please improve my code so that selecting multiple lis using shift key also work(Just like selecting multiple files in windows explorer). – Jul 19 '13 at 07:42
Maybe I misunderstood your requirement. In this fiddle when you select an element then after pressing shift and up or down arrow key it will select previous or next elemnt. – Anupam Jul 19 '13 at 08:57
When I click on first li then it will be selected. Now if I press and hold shift key and click on a non-conjugate li then it also select all lis between them. – Jul 19 '13 at 09:42

How to make elements select-able using jquery

1 Answers1