jquery ui draggable + sortable helper style

Question

Я использую плагин jquery ui для реализации перетаскивания, связанного с сортируемым элементом списка. Когда я перемещаю перетаскиваемый элемент, создается помощник с пользовательской шириной и высотой. Когда мой элемент находится над сортируемой областью, создается встроенный стиль и влияет на мою пользовательскую ширину и высоту. Помощник больше не имеет правильных размеров и занимает 100% ширины сортируемой зоны. Вы можете увидеть пример на примере jquery ui здесь http://jqueryui.com/draggable/ # sortable Моя цель - предотвратить вставку встроенного стиля для высоты и ширины помощника. Возможно ли это?

Я попробовал сортируемый параметр forcehelpersize, но без успеха.

Редактировать: Я заметил, что когда я нахожусь над сортируемой областью, хелпер принимает размеры исходного элемента, перетаскиваемого.

Answer 1

К сожалению, код ui.sortable, который устанавливает ширину вашего помощника, не учитывает ширину класса, как указано. Я использую jQuery 1.8.x и наткнулся на это же поведение. Глядя на исходный код, я увидел, что ui.sortable проверяет, указан ли стиль ширины в элементе, а если нет, задается его шириной первого элемента в сортируемом. Мое решение состояло в том, чтобы явно задать ширину и высоту помощника, используя форму функции перетаскиваемой вспомогательной опции.

$('#draggable').draggable({ 
    helper: function() { 
     var helper = $(this).clone(); // Untested - I create my helper using other means... 
     // jquery.ui.sortable will override width of class unless we set the style explicitly. 
     helper.css({'width': '462px', 'height': '300px'}); 
     return helper; 
    } 
}); 

Эти значения не обязательно должны быть жестко закодированы. Например, вы могли бы скопировать их из другого элемента. Но они do должны быть установлены на самом хелперном элементе (не унаследованы).

Answer 2

Вы также можете захватить ширину и высоту клонированного элемента и использовать их для установки ширины и высоты самого клона.

helper: function() { 
    var helper = $(this).clone(); // Untested - I create my helper using other means... 
    // jquery.ui.sortable will override width of class unless we set the style explicitly. 
    helper.css({'width': $(this).width(), 'height': $(this).height()}); 
    return helper; 
} 

Answer 3

Старый вопрос, google не против. Поэтому это может быть полезно некоторым людям. я использую событие на сортируемого объекта следующим образом:

$('#element').sortable({ 
    receive: function(event, ui) { 
     ui.helper.first().removeAttr('style'); // undo styling set by jqueryUI 
    } 

Answer 4

В верхней части .ready функции инициализации ширины фактической ширины. Если использовать только один элемент:

$('#myDraggable').css({ 
    'width' : $('#myDraggable').width() 
}); 

Если есть несколько элементов, которые вы можете перебрать с помощью:

$("#myDraggable > div").each(function(index) { 
    $(this).css({ 
     'width':$(this).width() 
    }); 
}); 

Answer 5

Это предотвратит JqueryUI в Helper от установки ширины:

$("#element").sortable({ 
    start: function(event, ui){ 
     ui.helper.css("width", "auto"); // or set a value if constant 
    } 
});