2012-03-05 209 views
1

我有一個關於jQuery UI的拖放功能的問題。我建立一個Web應用程序,用戶可以通過將零件從零件區域(貨架)拖到舞臺上來構建自己的對象。這個階段將包含一個主要組成部分,其中大部分是圓形的,這些子組成部分將放置在其上。jqueryui在我的項目中的一個主要問題

這些部分是帶有透明背景的200px x 400px的圖像,可拖動。他們可以放在舞臺區域。現在這裏是我面臨的問題:

當我拖動這些對象,並將其放置在舞臺區域,由於這樣一個巨大的圖像高度,他們傾向於重疊架子區域。這種重疊使貨架區域中的部件不可選或不可拖動。另外,當許多這樣的部件在舞臺上時,由於這種重疊而難以選擇所需的部件。

有沒有解決方案可以解決這個重疊問題。

開發平臺是jQuery用戶界面和.NET

回答

0

你可以拖放當你的貨架上,以減少它們的大小類添加到您的元素。

除了上下文之外,您沒有提供很多信息,例如您用於拖放的插件。

我用jQuery UI Droppable做了一個快速的例子。在drop event中,您將一個css類添加到已刪除的元素,可通過ui.draggable進行訪問。您還可以綁定out event,以便在您的元素可以從目標中拖出的情況下移除該類。

$("#droppable").droppable({ 
    drop: function(event, ui) { 
     $(ui.draggable).addClass('small'); 
    }, 
    out: function(event, ui) { 
     $(ui.draggable).removeClass('small'); 
    }, 
});​ 

DEMO

我想給你自己的實現,你能適應這種方法。

+0

我使用jQuery UI的可拖放式 – 2012-03-07 14:48:55