Elements no dropp

Elements no dropp

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <script class="jsbin" src="application/js/libs/jquery/jquery.js"></script>
  <script class="jsbin" src="application/js/libs/jquery/jquery-ui.js"></script>

 
<script src="js/libs/jquery/ckeditor/ckeditor.js"></script>
<script src="js/libs/jquery/ckeditor/adapters/jquery.js"></script>


<script>
$(document).ready(function(){
  //$(function() {
    $( "#accordion" ).accordion({
         heightStyle: "fill"
    });
    $( "#left-panel #accordion .controls div" ).draggable({
        appendTo: "#center-panel #droppable",
        helper:"clone",
        revert: "valid"
    });
    $( "#center-panel #droppable" ).droppable({      
       activeClass: "ui-state-default",
       hoverClass: "ui-state-hover",
      drop: function( event, ui ) {

      $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
      .html( "Dropped!" );
      }
     });
  //});
 });
</script>





<style>
 
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
#top-panel{background-color: #ccccff;z-index: 1;height: 70px;width: 100%;position:fixed;left:0px;top:0px;right:0px;}
#left-panel{margin-top: 70px;background-color: #cccccc;z-index: 1;height: 100%;width: 200px;position:fixed;left:0px;top:0px;bottom:0px;}
#right-panel{margin-top: 70px;background-color: #cccccc;z-index: 0;height: 100%;width: 200px;position:fixed;right:0px;top:0px;bottom:0px;}
#center-panel{background-color: #ffffcc;z-index: 0;height: 110%;width:70%;position:fixed;margin-left:200px;top:50px;right:202px;bottom:0px;border: gray dashed medium;}

</style> 
</head>
<body>
    <header id="top-panel">
       
    </header>
    <aside id="left-panel">
        <div id="accordion">
            <h3>Layouts</h3>
            <div class="controls">
                <div ><img src="images/builder/" title=""> FrameLayout</div>
                <div><img src="images/builder/" title=""> LinearLayout</div>
                <div><img src="images/builder/" title=""> TableLayout</div>
                <div><img src="images/builder/" title=""> GridLayout</div>
                <div><img src="images/builder/" title=""> RelativeLayout</div>
            </div>
            <h3>Widgets</h3>
            <div class="controls">
                <div><img src="images/builder/" title="">TextView</div>
                <div><img src="images/builder/" title="">Button</div>
                <div><img src="images/builder/" title="">RadioButton</div>
                <div><img src="images/builder/" title="">CheckBox</div>
                <div><img src="images/builder/" title="">Switch</div>
                <div><img src="images/builder/" title="">ToggleButton</div>
                <div><img src="images/builder/" title="">ImageButton</div>
                <div><img src="images/builder/" title="">ImageView</div>
                <div><img src="images/builder/" title="">ProgressBar</div>
                <div><img src="images/builder/" title="">SeekBar</div>
                <div><img src="images/builder/" title="">RatingBar</div>
                <div><img src="images/builder/" title="">Spinner</div>
                <div><img src="images/builder/" title="">WebView</div>
            </div>
            <h3>Text Fields</h3>
            <div class="controls">
                <div><img src="images/builder/" title="">PlainText</div>
                <div><img src="images/builder/" title="">Password</div>
                <div><img src="images/builder/" title="">E-mail</div>
                <div><img src="images/builder/" title="">Multiline text </div>
                <div><img src="images/builder/" title="">Number</div>
            </div>
            <h3>Containers</h3>
            <div class="control">
                <div><img src="images/builder/" title="">RadioGroup</div>
                <div><img src="images/builder/" title="">ListView</div>
                <div><img src="images/builder/" title="">GridView</div>
                <div><img src="images/builder/" title="">ExpandableListView</div>
                <div><img src="images/builder/" title="">ScrollView</div>
                <div><img src="images/builder/" title="">SearchView</div>
                <div><img src="images/builder/" title="">TabHost</div>
                <div><img src="images/builder/" title="">VideoView</div>
            </div>
            <h3>Expert</h3>
            <div class="controls">
                <div><img src="images/builder/" title="">Space</div>
                <div><img src="images/builder/" title="">CheckedTextView</div>
                <div><img src="images/builder/" title="">ExtractEditText</div>
                <div><img src="images/builder/" title="">AutoCompleteTextView</div>
                <div><img src="images/builder/" title="">NumberPicker</div>
                <div><img src="images/builder/" title="">ZoomControls</div>
                <div><img src="images/builder/" title="">MediaController</div>
                <div><img src="images/builder/" title="">SurfaceView</div>
            </div>
            <h3>Custom</h3>
            <div class="controls">
                <div><img src="images/builder/" title="">CustomView</div>
            </div>
           
          </div>
    </aside>
    <article id="center-panel" class="ui-widget-header">
        <div id="droppable" class="ui-widget-header">
         <p>Drop here</p>
        </div>
    </article>
    <aside id="right-panel" >
    </aside>
    <footer>
       
    </footer>
</body>
</html>

Elements are not dropped!