how to get jquery selectable to select elements from other divs

Question

how to get jquery selectable to select elements from other divs

1.3k views Asked by Suzi Larsen At 18 June 2015 at 15:51

I am working on something that requires me to have li's in different parents. I am using jquery Selectable to get the function of selecting the li's and also the ability to drag the mouse to select multiple li's.

This is working great apart from the fact that I need someway of including all of the li's under both parents when they are selected rather than acting as two seperate containers.

So in this example, when you drag over the numbers it will select all in the first block but not move onto the second block starting at number 13.

I need this to include all of the numbers somehow without having to move all of my li's into the same parent container.

(Sorry if I'm not explaining this well, I am struggling to explain what I mean. It will make more sense looking at the 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();
  });

Original Q&A

There are 2 answers

**depperm** · Answer 1 · 2015-06-18 16:00:27

depperm On 18 June 2015 at 16:00

Try adding a listener to a parent group, in this case body.

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

**Suzi Larsen** · Answer 2 · 2015-06-19 13:29:20

I thought I would answer my own question as this would be really useful for people to know as there isn't alot of documentation for this.

I discovered that if I use filter then I can actually choose which class within the parents that I want to be selectable. This allowed me to choose multiple selections from other lists also if i wrapped it all under the same parent with the #selectable id and also stopped it from selecting everything that was nesting within

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>
<div id="selectable">

    <ul>
      <li class="hello">1</li>
      <li class="hello">2</li>
      <li class="hello">3</li>
      <li class="hello">4</li>
      <li class="hello">5</li>
      <li class="hello">6</li>
      <li class="hello">7</li>
      <li class="hello">8</li>
      <li class="hello">9</li>
      <li class="hello">10</li>
      <li class="hello">11</li>
      <li class="hello">12</li>
    </ul>

    <ul>
      <li class="hello">13</li>
      <li class="hello">14</li>
      <li class="hello">15</li>
      <li class="hello">16</li>
    </ul>

</div>

</body>

CSS:

    #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable ul { 
    list-style-type: none;
    margin: 0px 0px 45px 0px;
    padding: 0;
    width: 450px;
    border:1px solid black; 
}
#selectable ul li {
    padding:5px 10px 5px 10px;
    border:1px solid lightgrey;
}

/*this adds the dotted line when dragging to the select*/
.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted black;
}

SCRIPT:

$(function() {
    $( "#selectable").selectable({
    filter: ".hello"
  });
});

https://jsfiddle.net/susannalarsen/v0kocx5g/

TechQA.

how to get jquery selectable to select elements from other divs

There are 2 answers

Related Questions in JQUERY

Related Questions in HTML

Related Questions in SELECTABLE

Related Questions in JQUERY-UI-SELECTABLE

Popular Questions

Popular Tags

Trending Questions