jQuery UI - 附加一个 class，使其可拖动

Question

您好！

我刚开始使用 jQuery UI，所以我已经遇到了一些问题...

我正在尝试制作一个允许用户制作平面图的网络程序。它具有拖放功能。

它有一个包含多个项目的菜单，可以四处拖动。问题是，当它被拖来拖去时，菜单中的项目消失了（因为它被拖来拖去）。所以我尝试使用以下代码修复该问题：

jQuery:

$('.notActive').draggable({ //.notActive is an item in the menu
    stop: function(){
        $(this).removeClass('notActive'); 
        $(this).addClass('active'); //make it an active item
        $('#menu').append($('<div class="item notActive">Furniture</div>'));
        //this creates a new item in the menu
    }
});

每个 item 都有 class .notActive 因为它没有被拖动。当它被用户拖动时，它会删除 class 并接收 class .active。因此，当它被拖动时，它会在 #menu 内创建一个新元素，其中包含 class .notActive。问题是，菜单中新创建的（附加（？））项目不是 .draggable()，即使它有 class .notActive.

这是为什么？如何创建一个 .draggable() 的新实例？

对于任何语法错误，我深表歉意，我是荷兰人。

编辑

这是 Fiddle：https://jsfiddle.net/8tpy7x3e/

Answer 1

您没有在添加到菜单的新项目上明确调用 draggable。

像这样的东西会起作用：

$('.notActive').draggable({ //.notActive is an item in the menu
  stop: function(){
    $(this).removeClass('notActive'); 
    $(this).addClass('active'); //make it an active item
    //Create a new object
    var newItem = $('<div class="item notActive">Furniture</div>');
    //Make the new item "draggable" and add it to the menu
    newItem.draggable();
    $('#menu').append(newItem);
    //this creates a new item in the menu
  }
});

Fiddle example

jQuery UI - 附加一个 class，使其可拖动

jQuery UI - append a class, make it draggable

html

jquery

jquery-ui

draggable