javascript – jQuery可排序的拖放

我想首先说一下我要做的事情.我正在开发一个菜单生成器(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进行变换似乎没有帮助.
对不起,如果有一个类似的线程但我找不到(我现在唯一能看到的没有解决方案).

在此先感谢您的帮助

解决方法

要回答我认为最紧迫的问题,这里是使用 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.

要解决此问题,您需要使用事件委派,理想情况是,出于性能原因,将事件委派范围限定为列. jQuery有一个 .delegate 方法,允许你实现这一点.以下是基于您的标记的示例代码：

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

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

根据.delegate上jQuery文档中的描述,这允许你做的事情不用担心在生成元素时重新绑定事件：“为一个或多个匹配选择器的元素附加处理程序,现在或者将来,基于一组特定的根元素.“

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,因为如果您不想使用按钮范例,它可能会提供更多限制和还原功能.

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

解决方法

相关文章