Jquery-щ.Проблема использования "перетаскиваемых", "сортируемых" и "вкладок" вместе - PullRequest
Новая
       32

Jquery-щ.Проблема использования "перетаскиваемых", "сортируемых" и "вкладок" вместе

2 голосов
/ 10 января 2012

Я начал с этого рабочего примера перетаскивания здесь .

Однако он прекрасно работает, когда я пытаюсь разместить области перетаскивания во вкладках ( Здесь )это кажется сломанным.Он перестает работать, когда я пытаюсь сбросить элемент на вкладке «Сортируемый 2».

Надеюсь, это имеет смысл.

HTML выглядит следующим образом: 

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<div id="tabs">
  <ul>
      <li><a href="#tabs-1">Sortable 1</a></li>
      <li><a href="#tabs-2">Sortable 2</a></li>
  </ul>

  <div id="tabs-1"> 
    <div class="ui-state-default">Item 13</div>
    <div class="ui-state-default">Item 23</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
  </div>
  <div id="tabs-2">  
    <div class="ui-state-default">Item 1</div>
    <div class="ui-state-default">Item 2</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
  </div>  
</div>

и JavaScript: 

$("#tabs").tabs();

$("#tabs-1, #tabs-2").sortable({
  revert: true
});
$("#draggable").draggable({
  connectToSortable: '#tabs-1, #tabs-2',
  helper: 'clone',
  revert: 'invalid'
});
$("ul, li").disableSelection();

1 Ответ

2 голосов
/ 11 января 2012

Похоже, что-то не так с jQuery 1.4 и / или jQuery-UI 1.8. Если вы играете с этим:

http://jsfiddle.net/ambiguous/jjmVt/

, который использует jQuery 1.4.4 и UI 1.8.7, вы увидите то же самое странное поведение, которое вы видите (а именно, что вам нужно взаимодействовать с сортируемым после переключения вкладок, прежде чем вы сможете снова перетаскивать ). Но если вы переключитесь на jQuery 1.7.1 и пользовательский интерфейс 1.8.16:

http://jsfiddle.net/ambiguous/NRZ2U/

Кажется, все работает нормально. Так что улучшите свой выход из проблемы.

Я также переключил Draggable на <div>, чтобы избежать создания недопустимого HTML, но это не влияет на странное поведение. Я также заменил ваш id="draggable" на class="draggable", чтобы снова избежать недопустимого HTML, но это также не влияет на некорректное поведение.

...