Измените размер перетаскиваемого элемента после начала перетаскивания

Question

У меня есть перетаскиваемый и отбрасываемый макет. Я создаю перетаскиваемый объект при добавлении его из выбора типа head. Однако у меня есть некоторые проблемы с размещением. Размер перетаскиваемого объекта намного больше, чем контейнер, в который он должен быть упаден. Это приводит к некоторым проблемам с отбрасыванием.

Я не изменю размер элемента до половина его текущего размера после перетаскивания. Как мне это сделать? Проблема отсутствует в скрипке, если width.semester не установлен в 30%.

Вот JSFiddle

EDIT:

После реализовав @ user619081 решение, которое я хотел, чтобы это произошло, только если объект был очень большой. Я сделал глобальную переменную var tempWidth и обновил код на следующее:

start: function(event, ui) { 
    if(tempWidth < $(this).width()){ 
     $(this).addClass("moveable"); 
    } 
    tempWidth = $(this).width(); 
}, 
stop: function(event, ui) { 
    $(this).removeClass("moveable"); 
} 

Answer 1

Вам нужно зацепиться за перетаскивание и перетащить события перетаскиваемого виджета.

Подробнее о них здесь:

• начало перетаскивания (старт) - http://api.jqueryui.com/draggable/#event-start
• Drag остановки (стоп) - http://api.jqueryui.com/draggable/#event-stop

Теперь, когда вы знаете, как использовать их , вы можете сделать что-то вроде этого:

$(".courseBox").draggable({ 
    revert: "invalid", 
    containment: "document", 
    cursor: "move", 
    start: function(event, ui) { 
    $(ui.helper).css('width', "50%"); 
    }, 
    stop: function(event, ui) { 
    $(ui.helper).css('width', "100%"); 
    } 
}); 

Обратите внимание, что ui.helper содержит ссылку на элемент, который вы перетаскиваете, поэтому вы видите его в коде.

Вот working fiddle тоже.

Answer 2

Вы должны смотреть в ondragstart и ondragstop событий. Посмотрите на ev.originalEvent.dataTransfer, если вам нужно передать некоторую информацию об исходном состоянии элемента DOM, например, исходную ширину или что-то еще.

$(".courseBox").on('dragstart', function(ev) { 
    $(this).css('width', '50%'); 
}); 

$(".courseBox").on('dragstop', function(ev) { 
    $(this).css('width', '100%'); 
}); 

Answer 3

I have updated your fiddle just check it. 
It is working with targeted width size 

https://jsfiddle.net/8g2oqp0h/37/