jQuery的可拖動拖動和可調整大小不能按預期工作

JQueryUI拖動可調整大小不能調整大小不起作用。想法是能夠拖動拖放到div的元素，並調整拖放元素的大小。jQuery的可拖動拖動和可調整大小不能按預期工作

工作代碼：http://jsfiddle.net/lukaszjg/GvDLh/

指令來重現問題：

將「拉我」到「地方砸」
1. 嘗試調整
2. 嘗試裏面拖拖動的元素「放置的地方」
3. 嘗試再次調整大小拖動元素 - 未按預期工作

請在下面的代碼中找到#dragme和#droppable指的是相應的div。任何ide如何解決它？

$("#dragme").draggable({ 
helper: 'clone', 
cursor: 'move', 
tolerance: 'fit' 

}); 

var x = null; 
$("#droppable").droppable({ 
drop: function(e, ui) { 

x = ui.helper.clone(); 

x.draggable({ 
helper: 'original', 
containment: '#droppable', 
tolerance: 'fit' 
}); 

x.resizable(); 
x.appendTo('#droppable'); 
ui.helper.remove(); 
} 
});

來源

2011-09-18 user950993

jsfiddle對我來說工作的很好。唯一的問題是，當您嘗試選擇右下角時，我的瀏覽器（Chrome）非常挑剔，因此您可以在二維中調整大小。 – m90

@ m90：觀看DOM，當你拖動，拖放和再次拖動時，看看是否最終會有一組「.ui-resizable-handle」元素。 z-index衝突如何發揮可能與瀏覽器有關。 –

當您可調整大小的小部件綁定到一個元素，它會增加一些<div class="ui-resizable-handle">元素。然後，你drop回調裏面，你有這樣的：

x = ui.helper.clone();

這將克隆.ui-resizable-handle元素，以及要複製的元素。再後來幾行，你必須：

x.resizable();

顯然是呼叫會被.ui-resizeable-handle元素的存在混淆;它最終會添加一組額外的.ui-resizeable-handle元素，但它們不會工作，可能是因爲z-index問題：原件將（可能）高於它們並阻止所有事件下降到具有事件處理程序的.ui-resiable-handle元素附在他們身上。如果手動刪除有問題的前<div>奇妝克隆可調整大小：

x.find('.ui-resizable-handle').remove(); 
x.resizable();

然後，它的工作原理：

$("#droppable").droppable({ 
    drop: function(e, ui) { 
     x = ui.helper.clone(); 
     x.draggable({ 
      helper: 'original', 
      containment: '#droppable', 
      tolerance: 'fit' 
     }); 
     x.find('.ui-resizable-handle').remove(); 
     x.resizable(); 
     x.appendTo('#droppable'); 
     ui.helper.remove(); 
    } 
});

更新小提琴：http://jsfiddle.net/ambiguous/xZECa/

只是打電話x.resizable('destroy')把它清理乾淨不因爲x不可調整大小，所以沒有任何反應。

應該有更好的方法來完成這項工作，但我不知道它到底是什麼。

來源

2011-09-18 08:14:03

我有一些麻煩試驗你的解決方案，但你讓我走，所以我會描述我的問題和解決方案，如果這有助於別人。

我的案例：一個規劃與可droppable divs代表每個員工，可拖動，可調整大小divs代表任務。

問題：完全一樣，只有我的「任務」已經是droppable的子項（來自數據庫），並且有很多.data（）的東西，所以克隆是一團糟。 Droppable Drop事件拋出一個錯誤「無法轉換JavaScript參數」，並將我的應用程序阻止任何進一步的拖動。

看到您的解決方案，並不能重現它在我的情況後，我又回到了基礎：

「如果你有一個樵夫IQ使用斧頭」。

所以這裏的東西：

$("#dragme").draggable({ 
helper: 'original', //Needed in my case 
cursor: 'move', 
tolerance: 'fit', 

start: function(event,ui){ 
$(this).resizable("destroy");/* The resizable generates troubles to the droppable? 
Well let's remove the problem... 
*/ 
} 

}).resizable({ 
/*All my functions to apply to the task when resized*/ 

});// I'm creating the resizable immediately because needed to attribute more or less time to the task 


$("#droppable").droppable({ 
drop: function(e, ui) { 
/*All my drop functions to manage the task*/ 

//creating the resizable again PROBLEM SOLVED 
$(ui.draggable).resizable({ 
/*All my functions to apply to the task when resized*/ 
}); 

} 
});

希望這可以幫助

注：不是很肯定，我的英語水平，以便在錯誤Ø拼寫錯誤，請參閱「返璞歸真」的情況下，部分和原諒我;-)。

來源

2012-04-28 11:19:16 Julien

一旦您將「.resizable（）」添加到元素中，首先銷燬該事件，然後再附加。它會工作。 // $（ele）是一個對象。

 


    $(ele).resizable().resizable("destroy"); 
     $(ele).draggable(); 
     $(ele).resizable({ 
      animate: 'true', 
      ghost: 'true', 
      handles: 'ne, nw, se, sw', 
    });

來源

2014-07-22 07:55:07

jQuery的可拖動拖動和可調整大小不能按預期工作

回答

相關問題