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可排序拖放 - 克隆和其他問題

回答

相關問題