新附加的元素不可拖动

Question

我正在创建一个简单的表单生成器来处理jQueryUI。我有一个表单元素的列表，就像我制作的可拖动的图像一样，设置为helper"clone"。我还有一个可丢弃区域，在该区域上我设置了drop事件来读取已丢弃图像的id，并创建一个适当的表单元素并将其附加到可丢弃区域。一旦我添加了新元素，我就会将其设置为可拖动。问题是，尽管新元素在调用draggable后具有类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();
                }
            });
});

Answer 1

UPDATE它不起作用的原因是输入以某种方式干扰了拖动事件。这与它被丢弃的事实无关。我已经为元素添加了填充，现在，拖动填充，它就可以工作了：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();
   

这将使更加健壮

Answer 2

在任何添加新元素的地方，都必须再次应用插件，因为动态添加的元素不知道像一样将自己附加到哪里

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

Answer 3

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

Answer 4

请尝试更改

$('body').append(itemToAdd) 

至

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

或

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

Answer 5

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

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

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

将其作为参考进行检查

有了这个解决方法，您不需要在按照建议添加新元素后再次调用插件。