2

私はここでこのドラッグアンドドロップの例から始めました。

うまく機能しますが、タブ内にドロップ領域を配置しようとすると(ここ)、壊れているようです。「ソート可能 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();
4

1 に答える 1

2

jQuery 1.4 および/または jQuery-UI 1.8 に何か問題があるようです。これで遊ぶ場合：

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

これは jQuery 1.4.4 と UI 1.8.7 を使用しており、見ているのと同じ奇妙な動作が見られます (つまり、タブを切り替えた後、再度ドラッグ アンド ドロップできるようになる前に、ソート可能なものを操作する必要があります)。しかし、jQuery 1.7.1 と UI 1.8.16 に切り替えると:

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

すべてがうまくいくようです。したがって、問題から抜け出す方法をアップグレードしてください。

また、無効な HTML の生成を避けるためにドラッグ可能なものを a に切り替えました<div>が、それは奇妙な動作には影響しません。id="draggable"また、無効な HTML を回避するために your も置き換えましclass="draggable"たが、これはバグのある動作にも影響しません。

于 2012-01-11T11:23:33.757 に答える