如何为电子电路仿真器创建组件

Question

我正在创建一个电路模拟器作为一个项目，我已经开始通过制作所有的UI等，以使其功能阶段然而，我在我的工作中遇到了心理障碍，我目前在我的网站上有一个组件列表(以手风琴的形式，如果这是相关的)。现在我困惑的是如何制作这些组件。我正在使用JavaScript，因为我确信这是相关的信息。

所以我想要它做的是，当我单击列表中我想要的组件时，如何才能使该组件显示在我的鼠标下，并且可以在屏幕上拖放和编辑其中的一些组件。我真的很难想出一种方法来做到这一点，所以任何帮助都会非常感谢。

如果需要更多的信息/细节或截图和代码，请问我，如果我能得到一些帮助，我会很乐意提供任何东西。

编辑:谢谢你们的回答，真的很感谢！

Answer 1

这篇文章已经发布了几年了，但这对你来说是一个很好的开始。https://jsfiddle.net/audetwebdesign/78jwe/

jQuery(function ($) {

$('.drop-zone').droppable({
    accept: '.drag',
    drop: function (event, ui) {
        var $clone = ui.helper.clone();
        if (!$clone.is('.inside-drop-zone')) {
            $(this).append($clone.addClass('inside-drop-zone').draggable({
                containment: '.drop-zone'
            }));
        }
    }
});

$('.drag').draggable({
    helper: 'clone'
});

});