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。我基本上从droppable demo的购物车交互中复制了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样式标记。

您使用左侧的列表，但您的测试是右侧的跨度。认为最好坚持双方的名单。

你的第一个列为县印章的列表项目有一个隐藏的图片，不知道为什么，但如果你想要图片显示当他们向右移动你可能想添加一个类来限制图片的大小。

将元素从列表拖到div

1 个答案: