horizontal drag(spinner)

by pratik24

HTML

<div id="spinner_widget">
<button id="week_settings"><label for="spinner">Default week view:</label>
  <input id="spinner" name="value" value="4" size="1"/>
    
    </button>
</div>
<div class="toolbar">
        <ul id="sortable">
  <li class="ui-state-default">-</li>
  <li class="ui-state-default">-</li>
  <li class="ui-state-default">-</li>
  <li class="ui-state-default">-</li>  
</ul>
    </div>

CSS

#spinner_widget{
     float:left;
}

.toolbar{
     float:left;
}

ul {
            display:table-row;
        }
 ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
  html>body #sortable li { height: 1.5em; line-height: 1.2em; }
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }

JavaScript

$(function() {
    $( "#week_settings" ).button({      
       
      text: true
    }).attr("disabled", true);
  });

 $(function() {
    var spinner = $( "#spinner" ).spinner();
             
     $("#spinner").click(function(){
         prompt("values :"+spinner.val());
     });
     $('#spinner').spinner('option', 'min', '1');
$('#spinner').spinner('option', 'max', '4');
     
    $("#disable").click(function() {
      if (spinner.spinner("option","disabled")){
        spinner.spinner("enable" );
      }
      else {
        spinner.spinner("disable" );
      }
    });
    
  });

$(function() {
    $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight"
    });
    $( "#sortable" ).disableSelection();
  });