javascript - 将元素从列表拖到 div

Question

我正在尝试构建一个拖放式字母编辑器。基本上，元素将在左侧，可以将其拖过，而字母工作区将在右侧。在右侧，他们应该能够将可拖动元素移动到他们想要的任何位置。一旦他们从左向右拖动一个元素，它不应该从列表中删除该元素，而是在右侧显示隐藏的 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());
    }
});

这是一个 example fiddle我有布局和 CSS，以及最初的可拖动。只需要帮助连接两者。

Answer 1

我想我想出了一个 fiddle那就是你想要的。

你应该看看这个jQuery UI droppable demo .我基本上从可转换演示的购物车交互中复制了 fiddle 中的 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 的列表项有一张隐藏的图片，不知道为什么，但是如果您希望图片在向右移动时显示，您可能需要添加一个类来限制图片的大小。