2

我正在创建一个简单的表单构建器来使用 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();
                }

            });
});
4

5 回答 5

3

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

这将使它更加健壮

于 2012-04-04T20:42:49.297 回答
1

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

 //here you add the elements with class draggable 
 $(".draggable").draggable({
      //settings here
  });
于 2012-04-04T20:34:43.840 回答
0

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

于 2012-04-04T20:37:00.337 回答
0

请尝试更改

$('body').append(itemToAdd)

到

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

或者

$('body').append(itemToAdd);
$('.draggable').draggable();
于 2012-04-04T20:41:34.047 回答
0

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

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

要对 Chrome 的问题进行排序，tabindex="1"请使用class="draggable". 其他插件也有同样的问题，这就是解决方法。

检查此作为参考

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

于 2012-04-04T20:58:57.060 回答