Jquery с возможностью перетаскивания и изменения размера не работает должным образом

Когда вы привязываете виджет с изменяемым размером к элементу, он добавит несколько элементов <div class="ui-resizable-handle">. Затем внутри вашего обратного вызова drop у вас есть это:

x = ui.helper.clone();

Это клонирует элементы .ui-resizable-handle, а также элементы, которые вы хотите клонировать. И затем через пару строк у вас есть:

x.resizable();

Очевидно, этот вызов сбивает с толку наличие элементов .ui-resizeable-handle; в конечном итоге это приведет к добавлению дополнительного набора элементов .ui-resizeable-handle, но они не будут работать, вероятно, из-за проблем с z-индексом: оригиналы (вероятно) будут над ними и блокируют все события от перехода к элементам .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 не изменяет размер, поэтому ничего не происходит.

Должен быть лучший способ сделать эту работу, но я еще не знаю, что это такое.

У меня были некоторые проблемы с экспериментированием с вашим решением, но вы поставили меня на путь, поэтому я опишу свою проблему и решение, если это поможет кому-то еще.

Мой случай: планирование с выпадающими элементами div, представляющими каждого сотрудника, и перетаскиваемыми элементами с изменяемым размером, представляющими задачи.

Проблема: точно такая же, только мои «задачи» уже являются дочерними элементами 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*/
});

}
});

Надеюсь, это может помочь

Примечание: я не очень уверен в своем уровне английского, поэтому в случае ошибок или опечаток, пожалуйста, обратитесь к разделу «Назад к основам» и простите меня ;-).

Как только вы присоедините ".resizable()" к элементу, сначала уничтожьте событие, а затем присоедините его. это будет работать. //$(ele) — это объект.

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