0

こんにちは、この問題を解決する方法がわかりません。div のサイズを変更するには、「overflow: hidden」を使用しますが、これを配置すると、div の外にドラッグできません (できますが、透明です)。終了してサイズを変更すると、 div は非表示になりません:

HTML

    <div class="region">
    dragg to me MADA FAKA
</div>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="#tabs-2">tab-2</a></li>        
        <li><a href="#tabs-3">tab-3</a></li>        
    </ul>
    <div id="tabs-1">
        <div class="destacado" title="destacado">
            DRAGGABLE TO MADAFAKA 1
        </div>
    </div>
    <div id="tabs-2">
        <div class="destacado" title="destacado">
            DRAGGABLE TO MADAFAKA 2
        </div>        
    </div>    
    <div id="tabs-3">
        <div class="destacado" title="destacado">
            DRAGGABLE TO MADAFAKA 3
        </div>        
    </div>    
</div>

CSS

#tabs
{
    position: fixed;
    overflow: hidden;
    width: 320px;
    height: 150px;
    padding: 0.5em;
    border: 1px solid black;
    z-index: 2;
}


.destacado
{
    border: 2px solid black;
}

.region
{
    width: 200px;
    height: 200px;
    border: 2px solid red;
}

JS:

$('#tabs').tabs();
$('#tabs').resizable();
$('#tabs').draggable();

$('.region').sortable(
{
    connectWith: '.region',
    items: 'div[title="destacado"]'
});

$('#tabs-1, #tabs-2, #tabs-3').sortable(
{
    connectWith: '.region',    
    items: 'div[title="destacado"]'       
});

オーバーフローのない jsFiddle: 非表示: http://jsfiddle.net/hq9Pw/2/

オーバーフローのある jsFiddle: 非表示: http://jsfiddle.net/hq9Pw/3/

4

1 に答える 1

0

最終的にこれで解決しました：

    connectWith: '.region',
    appendTo: 'body',
    containment: 'window',
    helper: 'clone'
于 2012-05-04T09:54:20.357 に答える