个人中心
gpt4 book ai didi

javascript - 对象 # 没有方法 'draggable'
转载 作者：行者123 更新时间：2023-11-28 08:25:08 24 4
gpt4 key购买 nike

我正在为明信片编写一个构造函数。在此构造函数上，我必须能够添加文本和输入以编辑这些文本。而且这些文本是可拖动的。我有将文本和输入附加到正确位置的功能:

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();
                 
        });
         
    }

我有两种方法来调用这个 addTextWithControls() 函数:第一种方式:加载文档时我调用 initCard() 函数:

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

因此 initCard() 函数包含 addTextWithControls() 函数:

 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;');
           });
        });

文本和输入已追加，但出现错误:

Uncaught TypeError: Object #<Object> has no method 'draggable'

链接到(此信息来自控制台。我无法添加图片，因为没有足够的声誉):

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

并且可拖动不起作用。所以主要问题是:为什么两个不同地方调用的同一个函数 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>

或者，也许您在脚本之后添加了它。

关于javascript - 对象 #<Object> 没有方法 'draggable'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22526030/

24 4 0
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com