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

@H_197_4@ 我想首先说一下我要做的事情.我正在开发一个菜单生成器(idk如何命名它),比如在 WindowsPress中放置小部件但是在网站上创建菜单.我已经尝试使用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,我不知道如何在那里使用占位符(正如我所提到的,我找不到任何tutorial / thread / post with draggable& placeholder).

我已经考虑过使用regexp来更改项目ID(它对所有克隆的项目保持不变)但是idk如何获取项目ID并使用Firebug进行变换似乎没有帮助.
对不起,如果有一个类似的线程但我找不到(我现在唯一能看到的没有解决方案).

在此先感谢您的帮助

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

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