Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  ul { 
    float:left;
    width:75px;
    border:1px solid #888;
    list-style:none;
    margin:5px; padding:5px;
  }
  ul#list1 {color:#080;}
  ul#list2 {color:#800; text-align:right;}
  .icon{ 
    height: 16px; 
    width:16px; 
    background-image: url(http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/images/ui-icons_222222_256x240.png);
    cursor: pointer;
  }
  ul#list1 .icon {
    float:right;    
    background-position: -32px -48px; /* arrow east */
  }
  ul#list2 .icon {
    float:left; 
    background-position: -96px -48px; /* arrow west */
  }
</style>
<script>
  $.fn.pushTo = function(toSelector)
  {
    $this = $(this);
    $this.slideUp('slow', function(){$this.appendTo(toSelector).slideDown();});   
    return $this;
  };
  
  $(function(){
    $('ul#list1 .move').live('click', function(){
      $(this).closest('li').pushTo('ul#list2');
    });
    
    $('ul#list2 .move').live('click', function(){
      $(this).closest('li').pushTo('ul#list1');
    });
  });
</script>
</head>
<body>
  <ul id='list1'>
    <li>Item 1 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
    <li>Item 2 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
    <li>Item 3 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
    <li>Item 4 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
  </ul>
  <ul id='list2'>
    <li>Item 5 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
    <li>Item 6 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
    <li>Item 7 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
    <li>Item 8 <img class='icon move' src='http://3.bp.blogspot.com/_IKD9WtY5kxU/S4whF7yBQmI/AAAAAAAAAp4/4Ugx7MtnNZQ/blank.png'/></li>
  </ul>
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers