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
Post a Comment