Javascript 对象没有“可拖动”的方法

我正在为明信片写一个构造器。在这个构造器上，我必须能够添加文本和输入来编辑这些文本。这些文本是可拖动的。 我有将文本和输入添加到正确位置的功能：

function addTextWithControls(maxId, posX, posY, text, fontstyles) {                   
        var idForAdding = parseInt(maxId);  
        idForAdding++; //get id for appending elements
        $('#inputsBox').append('<div class="inputBox"><input type="text" name="text'+idForAdding+'" id="text'+idForAdding+'Inp" placeholder="Введите текст" value="'+text+'" onkeyup="changeText('+idForAdding+');" data-type="textInput" data-id="'+idForAdding+'"/><span id="text'+idForAdding+'Remover" data-type="remover" class="textRemover" data-id="'+idForAdding+'"></span><div class="cleaner"></div></div>');

        $('div.finishedPic').append('<span id="text'+idForAdding+'Span" data-type="textOnPic" style="left: '+posX+'px; top:'+posY+'px; '+fontstyles+'" data-id="'+idForAdding+'">'+text+'</span>');

         $(function() {        
            //calling .draggable for new appended element
            $( "div.finishedPic span" ).draggable({ containment: "parent" , 
                drag: function(){
                    console.log('.');                        
                },
            });
            //calling .sortable for new appended element
            $( "#inputsBox" ).sortable({
                placeholder: "ui-state-highlight",
                update: function(){
                    setZindexes(); 
                }
            });
            $( "#inputsBox" ).disableSelection();
                 
        });
         
    }

因此，initCard函数包含addTextWithControls函数：

     $(document).ready(function(){
        initCard();
     });

 function initCard(json) {
        $('div.finishedPic img').attr('src', json.image);  //set background image                    
        $.each(json.texts, function() { //parse json for getting information
            var styles = '';                
            var obj = this.fontstyles;               
            forEach(obj, function(key, value){
                styles += key+': '+value+'; '; //get string with text styles. String looks like: 'font-size: 12px; color: #fff000;' 
            })                
            addTextWithControls(this.id, this.posX, this.posY, this.text, styles);
        }); 

输入名为“json”的数据，它是关于文本层的信息。字体大小、颜色、字体样式等。 这个变体正在工作

但如果要通过这种方式调用相同的函数addTextWithControls：

        $(document).ready(function(){
           $('#addText').on('click', function(){                
             var id = getMaxTextId();   //get max id before appending             
             addTextWithControls(id, '320', '120', 'Test sample', 'font-size: 25px; color: red;');
           });
        });

文本和输入追加但出现错误：

未捕获的TypeError:对象没有“可拖动”的方法

它与控制台中的此信息链接。我无法添加图片，因为没有足够的声誉：

$(function() {                
            $( "div.finishedPic span" ).draggable({ containment: "parent" ,
   Uncaught TypeError: Object #<Object> has no method 'draggable'  
                drag: function(){
                    console.log('.');                        
                },
            });

---

而且draggable不起作用。所以主要的问题是：为什么同一个函数addTextWithControls被两个不同的地方调用时表现不同。请帮帮我，因为我的大脑正在融化。

看起来您还没有包含jQuery UI脚本。 您可以将以下内容添加到html中：

<script src="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"</script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

或者，也许，你把它放在你的脚本之后。

ffffuuuuuu！！！！！！ 我为这个臭虫浪费了很多时间。问题出在调试栏中。我在这个项目中使用Zend框架，包括ZFDebug栏，有时会给javascript添加奇怪的bug

---

小心ZFDebug！如果Zend项目中发生了一些奇怪的事情，请关闭ZFDebug。

您是否包括了jquery ui库？所需的一切都包括在内。因为它在加载页面后工作，但在单击事件后不工作。否。包括订单在内，一切都可以。我刚才发现了一个问题。但我不能回答我自己的问题。因为：声誉低于10的用户在提问后8小时内无法回答自己的问题。您可以回答2014年3月20日下午3:18:52。在此之前，请使用评论或编辑您的问题。也许您可以删除它。当然可以。我把它关掉了。