Javascript 将元素从列表拖动到div

我正在尝试构建一个拖放字母编辑器。基本上，元素将位于左侧，可以在其上拖动，字母工作区将位于右侧。在右侧，他们应该能够将可拖动元素移动到他们想要的任何位置。一旦他们从左向右拖动一个项目，它就不应该从列表中删除该元素，而是应该在右侧显示隐藏的div。这将允许它们在同一元素上复制多次

    jQuery( "#letter .draggable" ).draggable({ 
    grid: [ 20, 20 ],
    containment: "parent",
    stop: function(event, ui) {
        var $newPosX =  jQuery(this).offset().left - jQuery(this).parent().offset().left;
        var $newPosY =  jQuery(this).offset().top - jQuery(this).parent().offset().top;

        console.log($newPosX.toString() + ', ' + $newPosY.toString());
    }
});

这是一个我已经得到了布局和CSS，以及最初的可拖动。只是需要帮助将两者联系起来。

我想我找到了一个符合您需求的解决方案

你应该看看这个。我在小提琴中复制了jQuery代码，基本上是从可拖放演示的购物车交互中复制的

$( "#letter-elements li" ).draggable({
    appendTo: "body",
    helper: "clone",
    connectToSortable: "#letter"
});

$( "#letter" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",

}).sortable({
     grid: [ 20, 10 ]        
});

为了帮助清理代码，您正在使用css样式表，因此您应该去掉HTML样式标记

您使用左侧的列表，但您的测试是右侧的跨度。我认为最好坚持两边的清单

---

您的第一个列表项标记为County seal有一个隐藏的图片，不知道为什么，但如果您希望图片移到右侧时显示，您可能需要添加一个类来限制图片的大小。

我认为您需要使用snap属性并设置一个事件侦听器，用于检测项目何时捕捉到字母区域，以便您可以再次在左侧创建副本。我认为你还需要删除遏制选项。希望一切顺利…谢谢！这很有帮助。它之所以在右边是一个跨度，是因为它应该可以在“字母”元素周围移动。它用于创建邮寄信件，以便他们可以根据自己的选择移动元素。因此，左边的列表提供了元素，这些元素可以拖动到右边，然后根据自己的选择移动。我将继续使用它。你可以用jquery移动任何html元素，只需使用css为它设置字母样式。