admin管理员组

文章数量:1344645

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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 12, 2016 at 10:09 ZeliaxZeliax 5,3961313 gold badges5555 silver badges7979 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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/

本文标签： javascriptChange size of draggable element upon start of dragStack Overflow