jquery - 新附加的元素无法拖动

Question

我正在创建一个简单的表单生成器来使用 jQueryUI。我有一个表单元素列表，就像图像一样，我将其设置为可拖动，设置为助手“克隆”。我还有一个可放置区域，我在其中设置放置事件来读取放置图像的 id 并创建适当的表单元素并将其附加到可放置区域。添加新元素后，我将其设置为可拖动。问题是，尽管新元素具有 ui-draggable 类，但一旦调用了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();
                }

            });
});

Answer 1

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

1. 尝试限制变量的范围:

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

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

2. 如果可以直接引用对象，请避免查找它们:

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

这将使其更加强大