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

我想先说说我正在尝试做什么。我目前正在研究一个菜单生成器（idk如何正确命名它），就像在WordPress中放置小部件但是用于在网站上创建菜单一样。我尝试过使用jQuery和Sortable（我尝试过Draggable和LiveQuery，但这不是我正在寻找的），但我遇到了一些问题：jQuery可排序拖放 - 克隆和其他问题

用户应该被赋予隐藏项目的内容，但隐藏/取消隐藏它的按钮隐藏/取消隐藏后复制项目
应该克隆源项目并且不移动（但使用占位符 - 我找不到可拖动的占位符）列表（我有一个临时解决方案，将源项目添加到列表末尾，但这不是我想要实现的）
该项目必须从一列移动到另一列（即从＃column1到＃column2 ，而不是＃列1 - >＃COLUMN1 [相同与＃列2]而不是＃列2 - >＃列1）

下面的代码：

的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（它对所有克隆的项目都保持不变），但是idk如何获取项目ID并使用Firebug对其进行更改似乎没有帮助。对不起，如果有一个类似的线程，但我找不到任何（我现在唯一可以看到没有解决方案）。

预先感谢任何帮助

来源

2011-06-13 hun7er

要回答什么，我认为是最紧迫的问题，下面是一个使用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的文档中描述：“附加一个处理程序，以一个或多个事件的选择，现在还是将来匹配，基于一组特定的根元素的所有元素“

克隆：源项目应克隆和不移动（但使用占位符 - 我不能没有从列表中删除发现拖动一个占位符）（我有一个临时的解决方案与添加在列表的末尾源项目，但不是我想要实现）

在哪为了正确克隆这个项目，我可能会建议改变你的界面范例，这样你就有一个按钮来指导用户进行一个类似“Click to Add”之类的操作。最好有一个驱动添加的按钮，而不必担心拖放。你仍然可以在column2中做.sortable，但有一个按钮可以简化添加交互。

掉落限制：该项目具有（被移动从一列到另一即，从＃列1至＃列2，不＃COLUMN1 - >＃COLUMN1 [相同与＃列2]，而不是＃COLUMN2 - > ＃column1）

如果你用添加的按钮范例，那么你可以避免需要担心这些限制。此外，请查看receive function，因为如果您不想使用按钮范例，它可能会提供更多的限制和恢复功能。

来源

2011-06-14 21:24:54

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

回答

相关问题