javascript - jQuery 可拖动 div 只有一次

Question

我正在尝试从 javascript 生成一个 div 并使其可拖动。但是它正在工作，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";         
        }
    }
};

那么当你想摆脱可拖动容器时，你只需要在某个时候触发隐藏