jquery-ui:从可调整大小的内容拖动到输出div

时间:2012-05-03 15:13:24

标签: jquery-ui overflow jquery-ui-sortable jquery-ui-resizable

嗨我不知道如何解决这个问题,调整div我使用“溢出:隐藏”但如果我把这个我不能拖出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 with overflow:hidden:http://jsfiddle.net/hq9Pw/3/

1 个答案:

答案 0 :(得分:0)

终于解决了这个问题:

    connectWith: '.region',
    appendTo: 'body',
    containment: 'window',
    helper: 'clone'