Question

我正在研究一些需要我在不同父母身上生活的东西。我使用jquery Selectable来获得选择li的功能，以及拖动鼠标选择多个li的功能。

除了我选择在父母双方选中而不是作为两个单独的容器时，我需要将所有的李包括在内的事实之外，这是非常有效的。

因此，在此示例中，当您拖动数字时，它将在第一个块中选择全部，但不会从第13个位置开始移动到第二个块。

我需要这个以某种方式包含所有数字，而不必将我的所有li移动到同一个父容器中。

（对不起，如果我不解释这个问题，我很难解释我的意思。看看这个例子会更有意义：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();
  });

Answer 1

我以为我会回答我自己的问题，因为这对人们来说真的很有用，因为没有很多文件可供参考。

我发现如果我使用过滤器，那么我实际上可以选择父母中我想要选择哪个类。这允许我从其他列表中选择多个选项，如果我将它全部包装在具有#selectable id的同一父级下，并且也阻止它选择嵌套在

中的所有内容

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/

Answer 2

尝试将侦听器添加到父组（在本例中为正文）。

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

如何让jquery可选择从其他div中选择元素

2 个答案: