创建重叠的可拖动div div

在按钮单击事件上创建一个新的div。一旦div被创建，由于jqueryui可拖拽PLUGIN的帮助，它变得可拖动。我遇到了一个问题，当我尝试将一个div叠加在另一个之上时发生。最新创建的div元素将保持在最前面，不能与之前创建的div重叠。任何建议或解决方案，我怎么可以堆积divs不被禁止/限于最新的div元素创建？ JSFIDDLE 创建重叠的可拖动div div

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>

来源

2014-08-31 Code_Ed_Student

你应该保持可拖动层比别人多一个的z-index。首先添加position和z-index属性您.draggable元素的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');

jsFiddle Demo。

来源

2014-08-31 07:54:15 dashtinejad

创建重叠的可拖动div div

回答

相关问题