jQuery 可排序拖放 - 克隆等问题

Question

我想先说说我想做的事情。我目前正在开发一个菜单生成器（idk 如何准确命名），例如在 WordPress 中放置小部件，但用于在网站上创建菜单。我尝试使用 jQuery 和 Sortable 来实现（我也尝试过 Draggable 和 LiveQuery，但这不是我想要的），但我遇到了一些问题：

• 应为用户提供隐藏项目内容的可能性，但在复制项目后隐藏/取消隐藏它的按钮会阻塞
• 源项目应该被克隆而不是移动（但使用占位符 - 我找不到可拖动的占位符）而不从列表中删除（我有一个临时解决方案，将源项目添加到列表末尾但是这不是我想要达到的目标）
• 项目必须从一列移动到另一列（即从#column1 到#column2，而不是#column1 -> #column1 [与#column2 相同] 而不是#column2 -> #column1）

代码如下：

JavaScript：

$(function(){
$('.dragbox').each(function(){
    $(this).find('.dragbox-content').css('display', 'none');
});
$('.dragbox')
.each(function(){
    $(this).hover(function(){
        $(this).find('h2').addClass('collapse');
    }, function(){
        $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
        $(this).find('.configure').css('visibility', 'visible');
    }, function(){
        $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
        $(this).siblings('.dragbox-content').toggle();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
        if (ui.target == event.target) alert("Error!");
        $(ui.item).find('h2').click();
        $(ui.item).clone().appendTo(event.target);
        $(event.target).each(function(){
            $(this).find('.dragbox-content').css('display', 'none');
        });
    },
    remove: function(event, ui) {
        if (ui.target == event.target) alert("Error!");
    }

});
});

和 HTML：

<h3>Drag n Drop - menu test</h3>

<div class="column" id="column1">
    <div class="dragbox" id="item1" >
        <h2>category</h2>
        <div class="dragbox-content" >
            Name: <input type="text"/>
        </div>
    </div>
    <div class="dragbox" id="item2" >
        <h2>button</h2>
        <div class="dragbox-content" >
            Text: <input type="text"/><br />
            Link: <input type="text"/>
        </div>
    </div>
    <div class="dragbox" id="item3" >
        <h2>html code</h2>
        <div class="dragbox-content" >
            <textarea></textarea>
        </div>
    </div>
</div>
<div class="column" style="width: 49%;" id="column2" >
</div>

我知道它可能看起来很混乱，所以有一个例子来说明我的意思： http://hun7er.pl/poligon/dragndrop/ 代码基于该教程：http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/

您可能会看到只有目标项目的内容可以隐藏/取消隐藏，有时在尝试隐藏/取消隐藏项目时可能会意外克隆。我在这里、stackoverflow 和其他一些地方（谷歌搜索）搜索了一个解决方案，但几乎所有解决方案都涉及 Draggable 或 LiveQuery，我不知道如何在那里使用占位符（正如我提到的我找不到任何带有可拖动和占位符的教程/线程/帖子）。

我曾考虑过使用正则表达式来更改项目 ID（对于所有克隆的项目都保持不变），但 idk 如何获取项目 ID 并使用 Firebug 更改它似乎没有帮助。 抱歉，如果有类似的帖子，但我找不到任何（我现在看到的唯一一个没有解决方案）。

提前感谢您的帮助

Answer 1

要回答我认为您最紧迫的问题，这里是一个使用 placeholder 可排序的 jQueryUI 示例。

不过，我想你可能追求的实际上是helper 属性，它用于定义拖动时要显示的元素。

关于你的明确问题（我已经添加了一个分类器来帮助识别我认为是什么问题）...

事件绑定问题：应该允许用户隐藏项目的内容，但在复制项目后隐藏/取消隐藏它的按钮会阻塞。

要解决此问题，您需要使用事件委托，出于性能原因，最好将事件委托范围限定为您的列。 jQuery 有一个.delegate 方法可以让你实现这一点。以下是一些基于您的标记的示例代码：

$('.column').delegate('.dragbox h2', 'hover', function() {
    $(this).toggleClass('collapse');
});

$('.column').delegate('.dragbox', 'click', function() {
    $(this).find('.dragbox-content').toggle();
});

这让您不必担心在生成元素时重新绑定事件，根据 .delegate 上的 jQuery 文档中的描述：“将处理程序附加到所有元素的一个或多个事件根据一组特定的根元素匹配选择器，现在或将来。"

克隆：源项目应该被克隆而不是移动（但使用占位符 - 我找不到可拖动的占位符）而不从列表中删除（我有一个临时解决方案添加列表末尾的源项目，但这不是我想要实现的）

为了正确克隆该项目，我可能会建议更改您的界面范例，以便您有一个按钮来指示用户使用“单击以添加”之类的号召性用语或类似内容。最好有一个按钮来驱动添加而不是担心拖放。您仍然可以在 column2 中执行 .sortable，但使用按钮会简化添加交互。

删除限制：项目必须从一列移动到另一列（即从#column1 到#column2，而不是#column1 -> #column1 [与#column2 相同] 而不是#column2 -> #column1)

如果您使用按钮范例进行添加，那么您可以避免担心这些限制。另外，请查看receive function，因为如果您不想使用按钮范例，它可能会提供更多的限制和还原功能。