javascript - 为可拖动的 div 制作 div 溢出

Question

在按钮单击事件上，我能够使用 jquery ui 生成可拖动的 div。我可以将新创建​​的 div 拖到容器 div class=” middle-side” 中。现在，可拖动的 div 固定在容器设置的空间内。我想给它更多的拖动空间，但保留容器的初始高度和宽度边界。我怎样才能做到以下几点:如果我一直将 div 一直拖到右边以使容器 div 滚动。 JSFIDDLE

查询

var z = 1;
$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement');
});

CSS

.middle-side {
    width: 500px;
    height: 500px;
    border: 2px solid;
}
.draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    background:#FFFFDD;
    position: relative;
    z-index: 1;
}

.placement {
    border: 2px dashed #000;
}

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<input type="button" id="button" value="Add Div with Text" />
<br/>
<div>
    <div class="middle-side empty"></div>

</div>

Answer 1

这是预期的行为:

http://jsfiddle.net/0wbnud4k/49/

我放置了一个更大的中间 div 并使您的容器滚动。

<div class="middle-side">
    <div class="droppable"></div>
</div>

所有内容都附加到内部 div 以及对象相对于内部 div 的绝对位置和相对位置。

.middle-side {
    width: 500px;
    height: 500px;
    border: 2px solid;
    overflow: scroll;
}

.droppable {
    width: 2000px;
    height: 2000px;
    position: relative;
}

.draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    background:#FFFFDD;
    position: absolute;
    z-index: 1;
}

.placement {
    border: 2px dashed #000;
}