新添加的元素不会变得可拖动

Posted 2023-05-08

【中文标题】新添加的元素不会变得可拖动

【英文标题】：Newly appended elements don't become draggable

【发布时间】：2012-04-18 14:39:32

【问题描述】：

我正在创建一个简单的表单构建器来使用 jQueryUI。我有一个表单元素列表，就像我制作的可拖动的图像一样，设置为助手“克隆”。我还有一个可放置区域，在该区域上我设置了放置事件以读取放置图像的 id 并创建适当的表单元素并将其附加到可放置区域。添加新元素后，我将其设置为可拖动的。问题是，尽管新元素具有 ui-draggable 类，但一旦在它们上调用了可拖动，它们就不能拖动。我希望能够在它们创建后拖动它们。

代码如下：-

var itemCount = 1;
var idToAdd;
var itemToAdd;

$(document).ready(function()
    $(".draggable").draggable(
        opacity:0.5,
        helper: "clone"
    );

     $(".form_builder").droppable(
        
                activeClass: "droppable_dragged",
                drop: function(e, ui)
                    var dropped_item = ui.draggable;
                    switch($(dropped_item).attr("id"))
                        case "text_box":
                            idToAdd = "textBox" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='text' />";
                            break;
                        case "text_area":

                            break;
                        case "radio":
                            idToAdd = "radio" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='radio' />";
                            break;
                        case "check":
                            idToAdd = "check" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='check' />";
                            break;
                        case "dropdown":

                            break;
                        case "file":
                            idToAdd = "file" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='file' />";
                            break;
                        case "button":
                            idToAdd = "button" + itemCount;
                            itemToAdd = "<input id='" + idToAdd + "' type='submit' />";
                            break;
                    
                    itemCount++;
                    $(this).append(itemToAdd);
                    $("#" + idToAdd).draggable();
                

            );
);

【问题讨论】：

你能设置一个jsfiddle吗jsfiddle.net

您的编辑 3 删除了您设置 itemToAdd 的字符串！

jsFiddle 这里jsfiddle.net/jayhouse072/7HUt2

Solutions here 可能会解决您的问题。

@d_inevitable 已修复，不确定那里发生了什么。

【参考方案1】：

更新它不起作用的原因是输入以某种方式干扰了拖动事件。这与它被丢弃的事实无关。我已经为元素添加了填充，现在，拖动填充，它可以工作了：http://jsfiddle.net/7HUt2/4/

尝试限制变量的范围：

drop: function(e, ui)
   var itemToAdd;
   ...

这将确保没有其他同时发生的事件会破坏您的程序流程。

如果您可以直接引用您的对象，请避免寻找它们：

itemToAdd = '<input type="..."/>'; //No id necessary at this point.   
$(itemToAdd).appendTo(this).draggable();

这将使它更加健壮

【讨论】：

好的，有道理，谢谢。我已经更新了 jsFiddle 以附加新项目，例如 $(itemToAdd).appendTo(this).draggable();唯一的问题是尽管新项目仍然不可拖动。

好的，我发现了为什么真的没有工作，并用可能的解决方法更新了我的答案。

太好了，谢谢。我应该稍微简化一下我的问题。我认为人们认为我期望新元素是可拖动的，因为第一次调用 draggable 而不是查看所有代码，因为事实并非如此。感谢您的帮助。

【参考方案2】：

无论你在哪里添加新元素，你都必须再次应用插件，因为动态添加的元素不知道将自己附加到哪里

 //here you add the elements with class draggable 
 $(".draggable").draggable(
      //settings here
  );

【讨论】：

这不是我在附加项目后调用它所做的吗？

其实jquery ui不需要设置。如果它不是输入类型，而是 div，它确实可以工作，例如：jsfiddle.net/7HUt2/2

@d_inevitable tnx 提供信息 +1

【参考方案3】：

调用 .draggable 只会影响现有的 DOM，不会影响未来的 DOM 元素。因此，您需要在添加要使其可拖动的新元素后再次调用它。

【讨论】：

这不是我在 drop 事件函数结束时正在做的事情吗？我将新元素添加到 droppable 中，然后在其上调用 draggable。

【参考方案4】：

请尝试更改

$('body').append(itemToAdd) 

到

$('body').append(itemToAdd).find('.draggable').draggable()

或者

$('body').append(itemToAdd);
$('.draggable').draggable(); 

【参考方案5】：

为了让您的插件对动态添加的元素产生影响，您可以使用 .on() 方法（.on() 替换了 .live()，因为 jQuery v1.7.x ），例如：

$('body').on("focusin", function()
    $(".draggable").draggable(
        opacity:0.5,
        helper: "clone"
    );
); // on

要使用 Chrome 对问题进行排序，请将 tabindex="1" 属性添加到带有 class="draggable" 的每个元素。其他插件也有同样的问题，这就是解决方法。

Check this as a reference

使用此解决方法，您无需在按照建议添加新元素后再次调用插件。

【讨论】：

更正：应该是$('body').on() 而不是$(document).on()。我的错。