Question

当我们将“拖动标题”拖到页面内容时，我们希望它始终转到内部＆lt; section＆gt;标签。在下面的示例中，如果您缓慢拖动，它可能会从节标记中删除。

以下是我的示例：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();

$('.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();

Answer 1

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

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

我提到的代码就在这里。

$('#page-content').children().each(function() {
        if ('SECTION' != $(this).prop('tagName')) {
            $(this).remove();
        }
});

如何在一个部分内拖放html

1 个答案: