Jquery z opcją przeciągania i zmiany rozmiaru nie działa zgodnie z oczekiwaniami.

Question

JQueryUI Przeciągnij wewnątrz Droppable z możliwością zmiany rozmiaru nie działa. Pomysł polega na tym, aby przeciągać elementy, które są przeciągane i upuszczane, aby je podzielić za pomocą zmiany rozmiaru dla upuszczonych elementów.

kod robocza: http://jsfiddle.net/lukaszjg/GvDLh/

Instrukcje do odtworzenia problemu:

1. Drag "Wrota" na "miejsce do spadku"
   1. Spróbuj zmienić rozmiar
   2. Spróbuj przeciągnąć przeciągany element, wewnątrz "miejsce na spadek"
   3. Spróbuj zmienić rozmiar ponownie przeciągnięty element - nie działa zgodnie z oczekiwaniami

Proszę znaleźć kod poniżej, gdzie #dragme i #droppable odnoszą się do odpowiednich elementów div. Czy mogę to naprawić?

$("#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(); 
} 
}); 

Answer 1

Po powiązaniu widżetu skalowalnego z elementem, doda kilka elementów <div class="ui-resizable-handle">. Następnie wewnątrz drop zwrotnego, masz to:

x = ui.helper.clone(); 

To będzie klonować .ui-resizable-handle elementów, jak również elementy, które chcesz sklonować. A potem kilka wierszy dalej, trzeba:

x.resizable(); 

Najwyraźniej że wezwanie pogubi przez obecność .ui-resizeable-handle elementów; to w końcu doda dodatkowy zestaw elementów .ui-resizeable-handle, ale nie będą działać prawdopodobnie z powodu problemów z indeksem Z: oryginały będą (prawdopodobnie) nad nimi i blokują wszystkie zdarzenia od zejścia do elementów .ui-resiable-handle, które mają procedury obsługi zdarzeń dołączone do nich. Jeśli ręcznie usunąć przestępstwa <div> s przed dokonaniem klon zmienny rozmiar:

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

Wtedy to działa:

$("#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(); 
    } 
}); 

Updated skrzypce: http://jsfiddle.net/ambiguous/xZECa/

Wystarczy nazywając x.resizable('destroy') go oczyścić nie pracować, ponieważ x nie można zmienić rozmiaru, więc nic się nie dzieje.

Powinien istnieć lepszy sposób na wykonanie tej pracy, ale nie wiem jeszcze, co to jest.

Answer 2

Miałem pewne problemy z eksperymentowaniem, ale postawiłeś mnie w drodze, więc opiszę mój problem i rozwiązanie, jeśli pomoże to komuś innemu.

Mój przypadek: planowanie z droppującymi elementami div reprezentującymi każdego pracownika oraz przeciągalne, skalowalne elementy div reprezentujące zadania.

Problem: Całkiem to samo, tyle że moje "zadania" są już dziećmi droppable (pochodzi z bazy danych) i mają dużo rzeczy .data(), więc klonowanie było bałaganem. Zdarzenie droppable drop powoduje błąd "nie można przekonwertować argumentu javascript" i powoduje przerwanie mojej aplikacji blokującej dalsze przeciąganie.

Po obejrzeniu swoje rozwiązanie i nie do odtworzenia go w moim przypadku i wrócił do podstaw:

„Jeśli masz drwalem IQ użyciu siekiery”.

Więc oto rzeczy:

$("#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*/ 
}); 

} 
}); 

nadzieję, że może pomóc

UWAGA: Nie bardzo pewny mój poziom angielskiego więc w przypadku błędów ö ortograficzny Proszę odnieść się do „Powrót do korzeni” sekcję i wybacz mi ;-).

Answer 3

Po dołączeniu ".resizable()" z elementem najpierw zniszcz wydarzenie, a następnie dołącz. to zadziała. // $ (ele) to obiekt.

 


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