CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Zeliax
Zeliax

Reputation: 5386

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

Upvotes: 1

Views: 8347

Answers (3)

Bhavi
Bhavi

Reputation: 11

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

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

Upvotes: 1

Tadas Paplauskas
Tadas Paplauskas

Reputation: 1903

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%');
});

Upvotes: 2

user1372494
user1372494

Reputation:

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.

Upvotes: 9

Related Questions