Question

我有一个向页面发送通知的函数，我在前面添加了一个带有通知的主div，这是函数：

ChildClass childClass = Mockito.spy(new ChildClass());

正如你所看到的，我声明了.draggable draggable但它只适用于创建的第一个通知，有什么方法可以解决这个问题并使所有div与该类可拖动？

HTML：

function showNotification_event2(notificationTitle, notificationContent, notificationColor, notificationSize) {
    console.log('trying to execute notification');

    var notificationArea = $('#notification_area');
    var notificationHtml;

    notificationHtml += '<div class="container">';
    notificationHtml += '<div class="col-md-' + notificationSize + ' col-centered">'; // column
    notificationHtml += '<div class="draggable panel panel-pink">';
    notificationHtml += '<div class="panel-heading" style="background-color: ' + notificationColor + '">';
    notificationHtml += notificationTitle;
    notificationHtml += '</div>';
    notificationHtml += '<div class="panel-body">';
    notificationHtml += notificationContent;
    notificationHtml += '</div>';
    notificationHtml += '</div>';
    notificationHtml += '</div>'; // end column
    notificationHtml += '</div>';

    $("#notification_area").prepend(notificationHtml);
    $('.draggable').draggable();
}

完整代码（自上次编辑后稍有改动）：

<div id="notification_area">
    <!-- Notificiations will automatically be added here. -->
</div>

Answer 1

有很多问题：

反复使相同的元素可拖动可能会导致问题。您是否尝试仅选择新添加的通知div并将其添加到其他可拖动的？（参见示例）
var notificationHtml;＆lt; - 此var似乎是一个应使用空字符串初始化的字符串。
已经为父容器创建了一个引用：var notificationArea = $('#notification_area');，在附加内容时，您可以使用此引用。（不是真正的错误）

修复这些showBootstrapNotification函数将是：

function showBootstrapNotification(notificationTitle, notificationContent, notificationColor, notificationSize) {
    console.log('trying to execute notification');


    var notificationArea = $('#notification_area');
    var notificationHtml = '';
    notificationHtml += '<div class="col-md-' + notificationSize + ' col-centered">';
    notificationHtml += '<div class="draggable panel panel-pink">';
    notificationHtml += '<div class="panel-heading" style="background-color: ' + notificationColor + '">';
    notificationHtml += notificationTitle;
    notificationHtml += '</div>';
    notificationHtml += '<div class="panel-body">';
    notificationHtml += notificationContent;
    notificationHtml += '</div>';
    notificationHtml += '</div>';
    notificationHtml += '</div>';

    const newNot = $(notificationHtml);
    notificationArea.prepend(newNot);
    newNot.draggable();
}

Div同类可拖动

1 个答案: