Javascript 使可拖动div的div溢出
在一个按钮点击事件中,我能够使用jquery ui生成可拖动的div。我可以将新创建的div拖动到容器div中Javascript 使可拖动div的div溢出,javascript,jquery,css,jquery-ui,Javascript,Jquery,Css,Jquery Ui,在一个按钮点击事件中,我能够使用jquery ui生成可拖动的div。我可以将新创建的div拖动到容器div中class=“middle side”。现在,draggable div被固定在容器设置的空间内。我想给它更多的拖动空间,但保持容器的初始高度和宽度边界。如果我一直向右拖动div以使container div滚动,我该如何执行以下操作 Jquery var z = 1; $('#button').click(function (e) { /** Make div draggabl
class=“middle side”
。现在,draggable div被固定在容器设置的空间内。我想给它更多的拖动空间,但保持容器的初始高度和宽度边界。如果我一直向右拖动div以使container 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');
});
HTML
这是预期的行为:
我放了一个中间大的div,让你的容器滚动
<div class="middle-side">
<div class="droppable"></div>
</div>
你能再解释一下你想完成什么吗?@fernandopasik举个例子,如果我一直向右拖动div,让container div滚动。
<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>
<div class="middle-side">
<div class="droppable"></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;
}