Element nach Vorlegen ziehbar machen?

Question

Ich habe eine Funktion, die eine Benachrichtigung zeigt und ich möchte, dass diese Benachrichtigung ziehbar sein kann, wenn sie der Seite hinzugefügt wird.

ich derzeit ein Haupt Elternteil div haben alle Benachrichtigung divs genannt zu halten notification_holder

Voll Sache:

<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 Funktion:

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); 

} 

und ich dies zu Beginn erklären der .js-Datei:

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

ich alle Dateien haben, bevor die Leute sagen, dass:

<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"> 

Das Problem ist, es kann mit dieser einfach nicht ziehbar ist jemand helfen?

Answer 1

Sie können Ereignisse an Elemente binden, nachdem sie erstellt wurden.

Dies kann Ihnen helfen:

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(); 
 
}

<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>