制作可拖动div的div溢出

在按钮上单击事件我能够使用jQuery UI生成可拖动的div。我可以将新创建的div拖入容器div class=” middle-side”中。现在，可拖动的div被固定，以留在设置到容器的空间内。我想给它更多的拖拽空间，但保留容器的初始高度和宽度边界。我怎么能如下：如果我继续拖动div一直到右侧的容器div滚动。 JSFIDDLE 制作可拖动div的div溢出

jQuery的

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>

来源

2014-09-02 Code_Ed_Student

你能解释一下更多关于你想要完成的事情吗？ – fernandopasik 2014-09-02 05:16:11

@fernandopasik一个例子，如果我继续拖动div一直到右侧的容器div滚动。 – 2014-09-02 05:17:34

这是预期的行为：

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; 
}

来源

2014-09-02 05:27:52 fernandopasik

制作可拖动div的div溢出

回答

相关问题