创建重叠的可拖动div [英] Creating overlapping draggable divs
问题描述
在按钮单击事件上,将创建一个新的div.创建div后,借助于jqueryui可拖动 PLUGIN 的帮助,它变得可拖动.我在尝试将div堆叠到另一个顶部时遇到了一个问题.最新创建的div元素将保留在顶部,并且不能与任何以前创建的div重叠.关于如何堆叠div的任何建议或解决方案,但不限于/仅限于最新的div元素创建? JSFIDDLE
On a button click event a new div is created. Once a div is created it becomes draggable thanks to the help of the jqueryui draggable PLUGIN. I am running into an issue that occurs when I try to stack a div on top of another. The latest created div element will stay on top and can’t be overlapped by any previously created div. Any suggestions or solutions of how I can stack divs not barred/limited to the latest div element creation? 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>
推荐答案
与其他图层相比,可拖动图层的z-index
保留更多.
首先在CSS中的.draggable
元素中添加position
和z-index
属性:
You should keep z-index
of draggable layer more than the others one.
First add position
and z-index
properties to your .draggable
elements in CSS:
.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');
这篇关于创建重叠的可拖动div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!