jQuery可排序的拖放-克隆和其他问题

jQuery sortable drag and drop - cloning and other issues

本文关键字：其他 问题 -克 拖放 排序 jQuery      更新时间：2023-09-26

我想先说一下我想做什么。我目前正在开发一个菜单生成器（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，我不知道如何在那里使用占位符（正如我所提到的，我找不到任何带有Draggable&占位符的教程/线程/帖子）。

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

提前感谢的任何帮助

为了回答我认为最紧迫的问题，这里有一个使用占位符的jQueryUI排序示例。

然而，我认为您可能想要的实际上是helper属性，该属性用于定义拖动时要显示的元素。

关于你明确的问题（我已经准备了一个分类器来帮助识别我认为的问题）。。。

事件绑定问题：应该为用户提供隐藏项目内容的可能性，但隐藏/取消隐藏按钮会在复制项目后阻止。

为了解决这个问题，您需要使用事件委派，理想情况下，出于性能原因，将事件委派范围界定为您的列。jQuery有一个.delete方法，可以实现这一点。以下是一些基于标记的示例代码：

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

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

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

为了正确地克隆项目，我可能建议更改您的界面模式，这样您就有了一个按钮，可以通过"单击添加"之类的操作调用来指示用户。最好有一个驱动添加的按钮，而不是担心拖放。您仍然可以在column2中执行.sortable，但有一个按钮可以简化添加交互。

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

如果你使用按钮模式进行添加，那么你就可以避免担心这些限制。此外，看看receive函数，因为如果您不想使用按钮模式，它可能会提供更多的限制和恢复功能。

相关文章：