javascript - jQuery sortable拖放-克隆等问题

Question

我想先说说我想做的事情。我目前正在研究菜单生成器(我不知道如何准确命名它)，类似于在 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(它对所有克隆的项目都保持不变)但是不知道如何获取项目 ID 并使用 Firebug 更改它似乎没有帮助。 对不起，如果有类似的线程，但我找不到任何(我现在能看到的唯一一个没有解决方案)。

在此先感谢您的帮助

Answer 1

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

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

关于您的明确问题(我在前面加上了一个分类器来帮助识别我认为是问题的地方)......

Event Binding Problems: the user should be given the possibility of hiding the content of the item but the button hiding/unhiding it blocks after copying the item.

要解决此问题，您需要使用事件委托(delegate)，出于性能原因，最好将事件委托(delegate)限定在您的列中。 jQuery 有一个 .delegate允许您实现此目的的方法。下面是一些基于您的标记的示例代码:

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

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

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

Cloning : the source item should be cloned and not moved (but using a placeholder - I couldn't find draggable with a placeholder) without being removed from list (I have a temporary solution with adding the source item on the end of list but that isn't what I want to achieve)

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

Drop Restrictions : the item has to be moved from one column to another (i.e. from #column1 to #column2, not #column1 -> #column1 [same with #column2] and not #column2 -> #column1)

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