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

然后你只需要在想要摆脱可拖动容器的某个时刻触发隐藏

jQuery draggable div只有一次

1 个答案: