html - how to get jquery selectable to select elements from other divs -


i working on requires me have li's in different parents. using jquery selectable function of selecting li's , ability drag mouse select multiple li's.

this working great apart fact need someway of including of li's under both parents when selected rather acting 2 seperate containers.

so in example, when drag on numbers select in first block not move onto second block starting @ number 13.

i need include of numbers somehow without having move of li's same parent container.

(sorry if i'm not explaining well, struggling explain mean. make more sense looking @ example: https://jsfiddle.net/susannalarsen/enq7bx22/1/

html:

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <body>  <ol id="selectable">   <li class="ui-state-default">1</li>   <li class="ui-state-default">2</li>   <li class="ui-state-default">3</li>   <li class="ui-state-default">4</li>   <li class="ui-state-default">5</li>   <li class="ui-state-default">6</li>   <li class="ui-state-default">7</li>   <li class="ui-state-default">8</li>   <li class="ui-state-default">9</li>   <li class="ui-state-default">10</li>   <li class="ui-state-default">11</li>   <li class="ui-state-default">12</li> </ol>  <div style="clear:both;"></div>  <ol id="test">   <li class="ui-state-default">1</li>   <li class="ui-state-default">2</li>   <li class="ui-state-default">3</li>   <li class="ui-state-default">4</li>   <li class="ui-state-default">5</li>   <li class="ui-state-default">6</li>   <li class="ui-state-default">7</li>   <li class="ui-state-default">8</li>   <li class="ui-state-default">9</li>   <li class="ui-state-default">10</li>   <li class="ui-state-default">11</li>   <li class="ui-state-default">12</li> </ol> 

css:

  #selectable .ui-selecting { background: #feca40; }   #selectable .ui-selected { background: #f39814; color: white; }   #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }   #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }  #test .ui-selecting { background: #feca40; } #test .ui-selected { background: #f39814; color: white; } #test { list-style-type: none; margin: 30px 0px 0px 0px; padding: 0; width: 450px; border:1px solid black; } #test li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } 

script:

+$(function() {     $( "#selectable, #test" ).selectable();   }); 

try adding listener parent group, in case body.

+$(function() {     $( "body" ).selectable(); }); 

Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -