Javascript 可拖动和可调整大小的div没有响应

我基本上是想用javascript和html创建一个视频注释编辑器，有点像YouTube。我已经成功地完成了大部分工作，这可能不是最好的实现，但至少我尝试过

基本上，我有一个按钮，当它被点击时生成一个div，这个div将有自定义标记，它存储出现和消失的时间、背景颜色和位置

播放视频时，将根据时间渲染div。然后，注释的所有数据将发送到数据库，稍后在另一个页面上呈现

这一切工作，但我希望能够调整div的大小，并使他们在窗口上拖动。它们都在一个固定的地方，大小也是固定的。下面是我使用.draggable.resizable尝试过的方法，但它不起作用，我不知道为什么。我认为问题在于我在代码中何时何地将注释设置为可拖动和可调整大小，这是在div呈现之后发生的

如果我希望注释是：

拖动 可调整大小 包含在视频的空间内 HMTL

JAVA脚本

var tbody = $("#log"); 
    var annotation_count = 0;

    function draggableResizable (elem){
        elem.draggable();
        elem.resizable();
    }

    function loadAnnot(){   
        var v = document.getElementsByTagName('video')[0]
        v.addEventListener('timeupdate',function(event){
            var sec = parseInt(v.currentTime);
            $( ".annotation" ).each(function() {
                var time_in = $(this).data("in");
                var time_out = $(this).data("out");
                var pos_x = $(this).data("x");
                var pos_y = $(this).data("y");

                this.style.position = "absolute";
                this.style.left = pos_x+"px";
                this.style.top = pos_y+"px";

                if (sec >= time_in && sec < time_out){
                    if ( $(this).not(':visible') ) {
                        $(this).show("slow");
                    }
                }
                if (sec < time_in || sec >= time_out){
                    if ( $(this).is(':visible') ) {
                        $(this).hide("slow");
                    }
                }
            });                                       
        },false);
    }

    function add_annotation(){
            annotation_count++;
            document.getElementById("btn_add_annotation").disabled = true;
            var v = document.getElementsByTagName('video')[0]
            v.pause();
            document.getElementById("annot_time").value = "0";
            document.getElementById("annot_time").min = "0";
            document.getElementById("annot_time").max = v.duration - v.currentTime;
            $('#annotation_editor').slideToggle("slow");

            var e = $('<div class="annotation" data-in= '+ v.currentTime +' style="background: rgb(255,255,255); width: 25%; left:100px; top:100px; display:none; opacity: 0.6">Exemple of annotation</div>').draggable.resizable;
            var vid = document.getElementById("advertisment_video");
            vid.currentTime; 

            $('.annotation-wrapper').prepend(e);    
            e.show("slow");
            e.attr('id', 'annotation'+annotation_count); 
            draggableResizable(e);
    };

    function add_toTable() {
        var x = document.getElementById("input");
        var text_row_one = document.getElementById("annotation_table").rows[1].cells.item(1).innerHTML;

        if (x.value == "Enter the desired text"){
            alertify.alert("Please enter a text lable");
            return;
        }

        if (text_row_one == "You have no annotation yet :-("){
            document.getElementById("annotation_table").deleteRow(1);
            $('#annotation_confirmation').slideToggle("slow");
        }

        var table = document.getElementById("annotation_table");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        var row_count = document.getElementById("annotation_table").rows.length;
        var vid = document.getElementById("advertisment_video");
        var n = vid.currentTime;
        var time_in = parseInt(n);
        var annot_length = document.getElementById("annot_time").value;
        var time_out = time_in + parseInt(annot_length);

        cell1.innerHTML = row_count-1;
        cell2.innerHTML = x.value;
        cell3.innerHTML = time_in;
        cell4.innerHTML = time_out;

        var current_annot = document.getElementById('annotation'+annotation_count);
        current_annot.setAttribute('data-out', time_out);
        $('#annotation'+annotation_count).hide("slow");

        resetEditor();
    }

    function getVal() {
        var x = document.getElementById("input");
        document.getElementById("annotation"+annotation_count).innerHTML = x.value;
    }

    $(document).ready(function(){
        var i = document.getElementById("annot_time"),
            o = document.getElementById("number_seconds");

        o.innerHTML = "0 Seconds";

        i.addEventListener('change', function () {
            o.innerHTML = i.value + " Seconds";
        }, false);

        var vid = document.getElementById("advertisment_video");
        vid.onplay = function() {
            loadAnnot();             
        };  

        $("#color_picker").spectrum({
            color: "#f00",
            change: function(color_picker) {
                var color = color_picker.toHexString();
                document.getElementById('annotation'+annotation_count).style.background = color;
            }
        });

    });

    function resetEditor(){
        $("#input").val("Enter the desired text");
        document.getElementById("btn_add_annotation").disabled = false;
        $('#annotation_editor').slideToggle("slow");
        $('#number_seconds').innerHTML("0 Seconds");
    }   

---

谢谢您的帮助。

您介意设置一个JSFIDLE来演示您的具体问题吗？@Troy这里必须在框架和扩展下将onLoad更改为No wrap-in，以使JSFIDLE中的任何内容都能正常工作。即使如此，似乎仍存在多个JavaScript错误。您在视频上遇到问题注释包装，因此您无法单击以拖动或调整每个注释的大小，或者注释包装位于视频顶部，您无法播放视频。您是否能够删除注释包装器，并让注释成为视频包装器的直接子对象？这样您就可以避免z索引问题。如果没有，则需要解决结构中的z索引问题。

var tbody = $("#log"); 
    var annotation_count = 0;

    function draggableResizable (elem){
        elem.draggable();
        elem.resizable();
    }

    function loadAnnot(){   
        var v = document.getElementsByTagName('video')[0]
        v.addEventListener('timeupdate',function(event){
            var sec = parseInt(v.currentTime);
            $( ".annotation" ).each(function() {
                var time_in = $(this).data("in");
                var time_out = $(this).data("out");
                var pos_x = $(this).data("x");
                var pos_y = $(this).data("y");

                this.style.position = "absolute";
                this.style.left = pos_x+"px";
                this.style.top = pos_y+"px";

                if (sec >= time_in && sec < time_out){
                    if ( $(this).not(':visible') ) {
                        $(this).show("slow");
                    }
                }
                if (sec < time_in || sec >= time_out){
                    if ( $(this).is(':visible') ) {
                        $(this).hide("slow");
                    }
                }
            });                                       
        },false);
    }

    function add_annotation(){
            annotation_count++;
            document.getElementById("btn_add_annotation").disabled = true;
            var v = document.getElementsByTagName('video')[0]
            v.pause();
            document.getElementById("annot_time").value = "0";
            document.getElementById("annot_time").min = "0";
            document.getElementById("annot_time").max = v.duration - v.currentTime;
            $('#annotation_editor').slideToggle("slow");

            var e = $('<div class="annotation" data-in= '+ v.currentTime +' style="background: rgb(255,255,255); width: 25%; left:100px; top:100px; display:none; opacity: 0.6">Exemple of annotation</div>').draggable.resizable;
            var vid = document.getElementById("advertisment_video");
            vid.currentTime; 

            $('.annotation-wrapper').prepend(e);    
            e.show("slow");
            e.attr('id', 'annotation'+annotation_count); 
            draggableResizable(e);
    };

    function add_toTable() {
        var x = document.getElementById("input");
        var text_row_one = document.getElementById("annotation_table").rows[1].cells.item(1).innerHTML;

        if (x.value == "Enter the desired text"){
            alertify.alert("Please enter a text lable");
            return;
        }

        if (text_row_one == "You have no annotation yet :-("){
            document.getElementById("annotation_table").deleteRow(1);
            $('#annotation_confirmation').slideToggle("slow");
        }

        var table = document.getElementById("annotation_table");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        var row_count = document.getElementById("annotation_table").rows.length;
        var vid = document.getElementById("advertisment_video");
        var n = vid.currentTime;
        var time_in = parseInt(n);
        var annot_length = document.getElementById("annot_time").value;
        var time_out = time_in + parseInt(annot_length);

        cell1.innerHTML = row_count-1;
        cell2.innerHTML = x.value;
        cell3.innerHTML = time_in;
        cell4.innerHTML = time_out;

        var current_annot = document.getElementById('annotation'+annotation_count);
        current_annot.setAttribute('data-out', time_out);
        $('#annotation'+annotation_count).hide("slow");

        resetEditor();
    }

    function getVal() {
        var x = document.getElementById("input");
        document.getElementById("annotation"+annotation_count).innerHTML = x.value;
    }

    $(document).ready(function(){
        var i = document.getElementById("annot_time"),
            o = document.getElementById("number_seconds");

        o.innerHTML = "0 Seconds";

        i.addEventListener('change', function () {
            o.innerHTML = i.value + " Seconds";
        }, false);

        var vid = document.getElementById("advertisment_video");
        vid.onplay = function() {
            loadAnnot();             
        };  

        $("#color_picker").spectrum({
            color: "#f00",
            change: function(color_picker) {
                var color = color_picker.toHexString();
                document.getElementById('annotation'+annotation_count).style.background = color;
            }
        });

    });

    function resetEditor(){
        $("#input").val("Enter the desired text");
        document.getElementById("btn_add_annotation").disabled = false;
        $('#annotation_editor').slideToggle("slow");
        $('#number_seconds').innerHTML("0 Seconds");
    }