Zeliax Zeliax - 6 months ago 26
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

width
of
.semester
is set to around
30%
.

Here's the JSFiddle

EDIT:



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()){
$(this).addClass("moveable");
}
tempWidth = $(this).width();
},
stop: function(event, ui) {
$(this).removeClass("moveable");
}

Answer

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:

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

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.