jQuery draggable div только один раз

Question

Я пытаюсь создать div из javascript и сделать его перетаскиваемым. Он работает, однако, div перетаскивается только один раз. Я бы хотел, чтобы он постоянно перетаскивался.

Я понимаю, что это связано с тем, что атрибут draggable находится внутри функции ad_annotation, но я не знаю, как еще я мог это сделать. Вот мой код:

 <div id="controle_panel"> 
      <button id="add_annotation" class="btn btn-default" onclick="add_annotation()"> 
       <span class="glyphicon glyphicon-plus"></span> New annotation 
      </button> 
     </div> 
     <div class="video_commands"> 
      <div id="video-wrapper" class="video-wrapper"> 
       <video id="advertisment_video" margin-top="100px" class="video-js 
         vjs-default-skin" preload="auto" data-setup="{}" controls /> 
       <source src=<?php echo '"' . $video["video_link"] . '"'; ?> type="video/mp4"></source> 
      </div> 
      <div id="annotation_confirmation" style="display: none;"> 
       <button id="confirm_annotation" class="btn btn-default" onclick=""> 
        <span class="glyphicon glyphicon-ok"></span> Confirm time and position 
       </button> 
      </div> 
     </div> 
    </div> 
</body> 

<script> 
    function add_annotation() { 
     var v = document.getElementsByTagName('video')[0]; 
     if (v.paused) { 
      alert("Please start the video to place an annotation at the current time"); 
     } else { 
      v.pause(); 
      var retVal = prompt("Enter the text of your anotation", "new anotation"); 
      if (retVal != "new annotation") { 
       var e = $('<div style="background: rgba(255,255,255,0.5); width: 25%;">' + retVal + '</div>'); 
       $('.video-wrapper').prepend(e);  
       e.attr('id', 'annotation'); 
       e.draggable({ 
        containment: '#video-wrapper', 
        cursor: 'move', 
        snap: '#video-wrapper' 
       }); 
       document.getElementById('annotation_confirmation').style.display = "inline"; 
      } 
     } 
    }; 
</script> 

Answer 1

Я рекомендовал бы перетаскиваемую контейнер внутри документа и просто показать и обновление, как вам нужно, а не создавать новый.

<div id="dragContainer" style="background: rgba(255,255,255,0.5); width: 25%; display:none"></div> 

Затем в JavaScript вы можете сделать его перетаскивать на нагрузке

$(function() { 
    $("#dragContainer").draggable({ 
       containment: '#video-wrapper', 
       cursor: 'move', 
       snap: '#video-wrapper' 
      }); 
}); 

И измените функцию:

function add_annotation(){ 
    var v = document.getElementsByTagName('video')[0] 
    if (v.paused){ 
     alert("Please start the video to place an annotation at the current time"); 
    }else{ 
     v.pause(); 
     var retVal = prompt("Enter the text of your anotation", "new anotation"); 
     if (retVal != "new annotation"){ 

      $('#dragContainer').html(retVal).show(); 

      document.getElementById('annotation_confirmation').style.display ="inline";   
     } 
    } 
}; 

Тогда вам просто необходимо, чтобы вызвать шкурку в какой-то момент, когда вы хотите избавиться от перетаскиваемого контейнера