Javascript 如何为电子电路模拟器创建元件

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

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

如果需要更多的信息/细节或屏幕截图和代码，请询问，如果我能得到一些帮助，我将非常乐意提供任何信息

---

编辑：谢谢大家的回答，真的很感谢

这篇文章已经发表了好几年了，但这对你来说是个好的开始。

---

代码是受欢迎和需要的，请发布它。听起来您需要克隆/创建表示组件的html元素，然后允许将其“拖拽”到位。这是其中一个自己编写代码确实需要花费太多时间并且可能无法很好地工作的时候。在这里，您确实需要一个库来加以利用，而且jqueryui提供了一种非常简单的方法，可以将拖放功能集成到您的站点中，这可能会让人们讨厌jQuery的建议。您需要看看如何使用jQuery和jQuery UI创建可拖动的元素

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'
});

});