Your IP : 216.73.216.20

Current Path : /home/etiennec/www/lib/jquery-ui-1.8.9/tests/visual/sortable/
Upload File :
Current File : /home/etiennec/www/lib/jquery-ui-1.8.9/tests/visual/sortable/sortable_ticket_4231.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Visual testcase for #4231</title>
	<link rel="stylesheet" href="../visual.css" type="text/css" />
	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
	<script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.droppable.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.sortable.js"></script>
   <style> 
   .scrollArea {
    overflow: auto;
    width: 400px;
    height: 600px;
  }      
  .dropArea {
    height: 100px;
    width: 380px;
    padding: 0 0 0 0;
    background-color: #CCCCCC;
    margin: 10px 0 10px 0;
  }
  .dragArea {
    width: 100px;
    height: 30px;
    background-color: #FF0000;
    margin: 10px 0 10px 0;
  }
  .inv {
    position: absolute;
    left: 450px;
    top: 10px;
    width: 150px;
    height: 600px;
  }
 </style> 
 <script>jQuery(document).ready(function(){
        $(".dropArea").droppable({
          drop: function(ev, ui) { $(ui.draggable).html("dropped"); }
        })
        .sortable();
        $(".dragArea").draggable({
          connectToSortable: '.dropArea',
          revert: 'invalid',
          helper: 'clone'
        });
    });
</script>
</head>
<body>
  <div class="scrollArea"> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
    <ul class="dropArea"></ul> 
  </div> 
 
  <ul class="inv"> 
    <li class="dragArea">Drag me</li> 
    <li class="dragArea">Drag me</li> 
    <li class="dragArea">Drag me</li> 
  </ul> 
 
</body>
</html>