0

当我们将“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();

4

1 回答 1

0

经过几个小时的挖掘，我有了自己的解决方案。如果某些情况下将内容放在部分标签之外，我要做的是删除内容。

这里是您可以参考的代码。 http://jsfiddle.net/vuktx/9nMqv/45/

我提到的代码在这里。

$('#page-content').children().each(function() {
        if ('SECTION' != $(this).prop('tagName')) {
            $(this).remove();
        }
});
于 2013-10-31T03:43:59.597 回答