0

I'm trying to enable sortable feature on div's that are being created on the fly. I could not reproduce the example from jquery UI. Am I missing something?

Here's the JS Fiddle:

<div id="sortable">
</div>

<input type='button' id='btn' value='add'/>    

$(function(){
    var c = 1;
    $("#btn").click(function(){

        var d = $("<div/>");
        d.html(c++);
        d.addClass('d');

        $("#sortable").append(d);        
    });

    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

#sortable{
    width: 300px;
    border:1px solid black;
    height:350px;
}

#sortable div 
{ 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em; 
    font-size: 1.4em; 
    height: 18px; 

}

/*#sortable li span {  }*/

.d{
     background-color:yellow;
     border:1px solid orange;
     height:20px;
}

http://jsfiddle.net/28jwu4y2/3/

Thiago Custodio
  • 17,332
  • 6
  • 45
  • 90

1 Answers1

2

You need to refresh sortable on every new addition of element , 

  $( "#selector" ).sortable( "refresh" );

See the working fiddle

P.S

Had you mis-configured the given fiddle? It has jquery-ui plug-in missing.

Runcorn
  • 5,144
  • 5
  • 34
  • 52