title: How to select multiple items using mouse click?
body: <p>This is the default jQueryUI display as a Grid Layouts (<a href="http://jqueryui.com/demos/selectable/#display-grid" rel="noreferrer">demo here</a>). I can select one at a time when using mouse pointer. I have to use <kbd>Ctrl</kbd> for multiple selections. How will I edit the code for multiple selections at once using just the mouse pointer?</p>
  <h3>CSS</h3>
  <pre><code>&lt;style&gt;
      #feedback { font-size: 1.4em; }
      #selectable .ui-selecting { background: #FECA40; }
      #selectable .ui-selected { background: #F39814; color: white; }
      #selectable { list-style-type: none; margin: 0; padding: 0; }
      #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
  &lt;/style&gt;
  </code></pre>
  <h3>JavaScript</h3>
  <pre><code>&lt;script&gt;
      $(function() {
          $( &quot;#selectable&quot; ).selectable();
      });
  &lt;/script&gt;     
  </code></pre>
  <h3>HTML</h3>
  <pre><code> &lt;div class=&quot;demo&quot;&gt; 
     &lt;ol id=&quot;selectable&quot;&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;1&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;2&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;3&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;4&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;5&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;6&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;7&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;8&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;9&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;10&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;11&lt;/li&gt;
       &lt;li class=&quot;ui-state-default&quot;&gt;12&lt;/li&gt;
     &lt;/ol&gt;
   &lt;/div&gt;&lt;!-- End demo --&gt;
   
   &lt;div class=&quot;demo-description&quot;&gt;
     &lt;p&gt;To arrange selectable items as a grid, give them identical dimensions and float them using CSS.&lt;/p&gt;
   &lt;/div&gt;&lt;!-- End demo-description --&gt;
  </code></pre>