Как изменить заполнитель для удаления в зависимости от перетаскиваемого объекта в jQuery UI Sortable?

Question

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

$( "#col1, #col2, #col3" ).sortable({
  connectWith: ".col",
  start: function(event, ui) {
    var type = ui.item.hasClass("double") ? " double": "";
  },
  placeholder: "module drop" + type
}).disableSelection();

Моя проблема в том, что я пытаюсь использовать var "type" вне рамок начала, но не могу придумать другого способа сделать это.

Если кто-то хочет поиграться с кодом, я настроил здесь скрипку: http://jsfiddle.net/TfcQq/

Answer 1

Согласно документации jquery ui (http://jqueryui.com/demos/sortable/#placeholder), есть установщик для заполнителя.Будьте осторожны с пробелами в значении, похоже, что это класс CSS.

Так что вы можете попробовать:

$( "#col1, #col2, #col3" ).sortable({
    connectWith: '.col'
}).disableSelection();

$(".module").mouseover(function(){
    $( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-single' );
});

$(".module.double").mouseover(function(){
    $( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-double' );
});