Zeliax Zeliax - 10 months ago 45
Javascript Question

Change size of draggable element upon start of drag

I have a draggable and droppable layout. I'm creating a draggable object when adding it from a typeahead search selection. However I have some "placement" issues. The size of the draggable object is much larger than the container it should be dropped in. This lead to some dropping issues.

I wan't to resize the element to half it's current size upon dragging start. How do I do this? The problem is not present in the fiddle unless the

is set to around

Here's the JSFiddle


After having implemented @user619081 solution I wanted make this happen only if the object was very large. I made a global variable
var tempWidth
and updated the code to the following:

start: function(event, ui) {
if(tempWidth < $(this).width()){
tempWidth = $(this).width();
stop: function(event, ui) {


You need to hook into the drag start and drag stop events of the draggable widget.

Read more about them here:

Now that you know how to use them, you can do something like this:

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

Please note that ui.helper holds the reference to the element that you are dragging, which is why you see it in the code.

Here's a working fiddle too.