Question

我想首先说一下我要做的事情。我正在开发一个菜单生成器（idk如何命名它），比如在WindowsPress中放置小部件但是在网站上创建菜单。我已经尝试使用jQuery和Sortable（我已经尝试过Draggable和LiveQuery，但这不是我正在寻找的）但是我有一些问题：

用户应该有可能隐藏项目的内容，但是复制项目后隐藏/取消隐藏它的按钮
源项目应该克隆而不是移动（但使用占位符 - 我找不到占位符可拖动）而不从列表中删除（我有一个临时解决方案，在列表末尾添加源项目但是这不是我想要实现的目标）
项目必须从一列移动到另一列（即＃column1到＃column2，而不是＃column1 - ＆gt;＃column1 [与＃column2相同]而不是＃column2 - ＆gt;＃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＆amp;占位符）。

我已经考虑过使用regexp来更改项目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 - ＆gt;＃column1 [与＃column2相同]而不是＃ column2 - ＆gt;＃column1）

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

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

1 个答案: