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 .semesteris 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");
}

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 .semesteris 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");
}

• javascript
• jquery
• html
• css
• jquery-ui

3 Answers 3

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

Read more about them here:

• Drag start (start) - http://api.jqueryui./draggable/#event-start
• Drag stop (stop) - http://api.jqueryui./draggable/#event-stop

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.

You should look into ondragstart and ondragstop events. Look into ev.originalEvent.dataTransfer if you need to pass some info about original state of DOM element, such as original width or something else.

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

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

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

https://jsfiddle/8g2oqp0h/37/