Jquery с переключаемым перетаскиваемым и изменяемого размера не работает, как ожидалось - PullRequest
5 голосов
/ 18 сентября 2011

JQueryUI Draggable внутри Droppable с изменяемым размером не работает. Идея состоит в том, чтобы иметь возможность перетаскивать элементы, которые перетаскиваются, чтобы разделить с изменением размера для отброшенных элементов.

Рабочий код: http://jsfiddle.net/lukaszjg/GvDLh/

Инструкция по воспроизведению проблемы:

  1. Перетащите «перетащите меня» в «место, куда можно упасть»
    1. Попробуйте изменить размер
    2. Попробуйте перетащить перетаскиваемый элемент внутрь "места для падения"
    3. Попробуйте изменить размер снова перетаскиваемого элемента - работает не так, как ожидалось

Пожалуйста, найдите код ниже, где #dragme и #droppable ссылаются на соответствующие div. Есть идеи как это исправить?

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

Ответы [ 3 ]

2 голосов
/ 28 апреля 2012

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

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

Проблема: Совершенно то же самое, только то, что мои «задачи» уже являются потомками Droppable (происходит из базы данных) и имеют много вещей .data (), поэтому клонирование было беспорядочным. Событие dropopable 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*/
});

}
});

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

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

2 голосов
/ 18 сентября 2011

Когда вы привязываете изменяемый виджет к элементу, он добавляет несколько элементов <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 не изменяемого размера, поэтому ничего не происходит.

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

0 голосов
/ 22 июля 2014

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



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


Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...