Question

我有一个显示通知的功能，我希望该通知在添加到页面时可以拖动。

我目前有一个主父div来保存所有名为notification_holder

的通知div

完整的事情：

<div class="notification_holder">
    <div class="container"><br><br><br>
        <div class="col-md-4"></div>
        <div class="col-md-4" id="notification_area">
            <!-- Notificiations will automatically be added here. -->
        </div>
        <div class="col-md-4"></div>
    </div>
</div>

SendNotification功能：

function showNotification_event(notificationTitle, notificationContent) {
    var notificationArea = $('#notification_area');

    var notificationHtml = '<div id="draggable" class="panel panel-pink">';
    notificationHtml += '<div class="panel-heading">';
    notificationHtml += notificationTitle;
    notificationHtml += '</div>';
    notificationHtml += '<div class="panel-body">';
    notificationHtml += notificationContent;
    notificationHtml += '</div>';
    notificationHtml += '</div>';

    $("#notification_area").prepend(notificationHtml);

}

我在.js文件的开头声明了这个：

$( function() {
    $( "#draggable" ).draggable();
});

我确实拥有所有文件，然后才会说：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

问题是，它只是不可拖动，任何人都可以帮忙吗？

Answer 1

您可以在创建元素后将事件绑定到元素。

这可能会对您有所帮助：

＆＃13;

function showNotification_event(notificationTitle, notificationContent) {
    var notificationArea = $('#notification_area');
    debugger;
    var notificationHtml = '<div id="draggable" class="panel panel-pink">';
    notificationHtml += '<div class="panel-heading">';
    notificationHtml += notificationTitle;
    notificationHtml += '</div>';
    notificationHtml += '<div class="panel-body">';
    notificationHtml += notificationContent;
    notificationHtml += '</div>';
    notificationHtml += '</div>';

    notificationArea.prepend(notificationHtml);
    $( "#draggable" ).draggable();
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="notification_holder">
    <div class="container"><br><br><br>
        <div class="col-md-4"></div>
        <div class="col-md-4" id="notification_area">
            <!-- Notificiations will automatically be added here. -->
        </div>
        <div class="col-md-4"></div>
    </div>
</div>

<button id="click" onclick="showNotification_event('test title', 'test content')">button</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

＆＃13;

在prepend之后使元素可拖动？

1 个答案: