创建重叠的拖放div
提问于 2014-08-30 23:39:34
在按钮单击事件上创建一个新的div。创建div后，由于jqueryui可拖式插件的帮助，它将变得可拖动。当我试图在另一个上面堆叠一个div时，我遇到了一个问题。最新创建的div元素将保持在顶部，不能与以前创建的div重叠。对于如何将div堆栈不受限制/仅限于最近创建div元素，有什么建议或解决方案吗？JSFIDDLE
Jquery
$('#button').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent'
}
}).addClass('placement');
/** Contain draggable div **/
$('.middle-side').parent().mousemove(function(e){
var offset = $(this).offset();
var relX = e.pageX - offset.left;
var relY = e.pageY - offset.top;
$('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
})
});
/** Place a temporary dashed border on div after initial creation**/
$('.middle-side').on('click', function(e){
var offset = $(this).offset();
var relX = e.pageX - offset.left;
var relY = e.pageY - offset.top;
$('.placement').css({'top': relY,'left': relX, 'position': 'absolute' });
$(this).off("mousemove").find('.placement').removeClass('placement')
}); 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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-30 23:54:15
您应该比其他层更多地保留拖放层的z-index。首先，在CSS中将position和z-index属性添加到.draggable元素：
.draggable {
width: 150px;
height: 150px;
padding: 0.5em;
background:#FFFFDD;
position: relative;
z-index: 1;
}在你的JS中：
// the counter
var z = 1;
$('<div />', {
class: 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent',
// whenever the drag start
start: function( event, ui ) {
// set the z-index one more
$(this).css('z-index', ++z);
}
}
}).addClass('placement');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25589912
复制
腾讯云开发者
