jquery - セクション内でhtmlをドラッグアンドドロップする方法

Question

"Drag Header" をページ コンテンツにドラッグするときは、常に <section> タグ内にドラッグします。以下の例では、ゆっくりドラッグするとセクションタグから抜けてしまうことがあります。

これが私の例です：http://jsfiddle.net/vuktx/9nMqv/44/

この画像は詳細を提供します: http://mangchiase.com/get/9a0fe591-71bc-4f13-861f-0f54e8277f41.image

専門家に感謝します。

$('.items ul li div.widget-item').draggable({
helper: function(e) {
    //return $('<div>').addClass('block').text( $(e.target).text() );
    return $('<div>').attr("style","height: 30px;width:50px;").attr("class","entire-page-template-hover");
},
cursor: "move",
start: function() {
    $(".span12, .span6, .span4, .span3, .span2").addClass("container-border");
    //$(".drop-message").addClass("entire-page-template-hover");
},
stop: function() {
    $(".span12, .span6, .span4, .span3, .span2").removeClass("container-border");
},
connectToSortable: "#page-content"
});

$('#page-content').sortable({
helper: function(e) {
    //return $('<div>').addClass('block').text( $(e.target).text() );
    return $('<div>').attr("style","height: 30px;width:50px;").attr("class","entire-page-template-hover");
},
placeholder: 'entire-page-template-hover',
items: ".widget-item",
cursor: "move",
//containment: ".span6, .span12",
//forcePlaceholderSize: true,
start: function() {
    $(".span12, .span6, .span4, .span3, .span2").addClass("container-border");

},
stop: function() {
    $(".span12, .span6, .span4, .span3, .span2").removeClass("container-border");
},
update: function (event, ui) {
    // turn the dragged item into a "block"
    ui.item.find('.widget-icon').remove();
    ui.item.find('.hide').removeClass('hide');
    addText();
},
change: function (event, ui) {

},
receive: function (event, ui) {
    addText();

},
over: function( event, ui ) {
    if ($(this).attr("id") != 'page-content') {
        $(ui.placeholder).css('display', 'none');
    } else {
        $(ui.placeholder).css('display', '');
    }        
    //$(this).find('.drop-message').remove();
}
});
function addText () {
$('.span12, .span6, .span4, .span3, .span2').each(function() {
    if ($(this).children().length == 0) {
        $(this).html('<div class="widget-item drop-message">Drop content here</div>');
    } else if ($(this).children().length > 1) {
        $(this).find('.drop-message').remove();
    }
});
}
addText();