I am attempting to create a draggable div using JavaScript, but I am running into an issue where the div is only draggable once. I would like it to remain draggable at all times.
I believe the problem lies in the fact that the draggable attribute is within the function add_annotation. I'm not sure how else to approach this. Here is my code:
<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>