CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
DeLe
DeLe

Reputation: 2480

jqueryui sortable before start event

I try to append some data before sortable start event. Here is my example

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

Js code

$( "#sortable" ).sortable({
            revert: true,
      forcePlaceholderSize: true,
      placeholder: "ui-state-highlight",
      start: function( event, ui ) {
        $(ui.item).append("<div>abc<br><br>abc</div>");
      }
        });

And when i drag Item 1 it look like

enter image description here

But i want append data before start to make placeholder resize. But maybe jquery ui not has that event. jHow can i do that thank.

Here is my example.

Upvotes: 0

Views: 3433

Answers (1)

gsc
gsc

Reputation: 1559

First, you have to reset list element’s height, then you have to apply its new height to the placeholder element. The code:

$(function() {
  $('#sortable').sortable({
    revert: true,
    forcePlaceholderSize: true,
    placeholder: 'ui-state-highlight',
    start: function(event, ui) {
      // we don’t want jQuery’s 20px
      ui.item.height('auto');
      ui.item.append('<div>abc<br><br>abc</div>');
      // now set the new height to the placeholder
      $(ui.placeholder[0]).height(ui.item.height());
    }
  });
});

Upvotes: 1

Related Questions