Draggable+Sortable & Scrollable Divs

I have a container with a list of draggable items and container with a list of sortable items. The draggables & the sortable list is connected, allowing the user to drag clones of the draggables to the sorted list.

The draggable items appear in a vertical list, however the sortable items appear in a horizontal list, achieved by floating them left. The container of the sortable items has its overflow set to auto, resulting in a horizontal scrollbar if the contents overflow. The two containers appear right next to each other, the draggables to the left & the sortables to the right.

The problem I'm experiencing is when the container of sortable items is scrolled to the right, dragging from the draggables' container immediately fires the sortables' events. It appears as if the contents of the sortables' container is moved behind the draggables' container.

Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Sortables in scrollable divs</title>
 <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
 <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"&gt;&lt;/script&gt;
 <script type="text/javascript" language="javascript">
  $(function() {
   $("#sortable").sortable({
    start: function(event, ui) {
     if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
    },
    stop: function(event, ui) {
     if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
     if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
    }
   });

   $("#sortable").sortable("disable");

   $("#draggable li").draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid',
    cursor: "default",
    cursorAt: { top: -5, left: -5 },
    start: function(event, ui) {
     if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start");
    },
    stop: function(event, ui) {
     if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped");
    }
   });

   $("#container2").mouseenter(function() {
    console.log("enter sortable container");
    $("#sortable").sortable("enable");
   }).mouseleave(function() {
    console.log("leaving sortable container");
    $("#sortable").sortable("disable");
   });

   $("#draggable, #sortable").disableSelection();
  });
 </script>
 <style type="text/css">
  html, body, p, td, th, li, input, select, option, textarea
  {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color:#343E41;
  }

  .wrapper
  {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   height: expression(this.parentNode.offsetHeight + "px");
  }

  .scroll-wrapper
  {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: auto;
   height: expression(this.parentNode.offsetHeight + "px");
  }

  #container1
  {
   float:left;
   width:200px;
   height:400px;
   overflow:auto;
   border:solid #000 1px;
   margin:5px;
  }

  #container2
  {
   float:left;
   width:600px;
   height:400px;
   overflow:auto;
   border:solid #000 1px;
   margin:5px;
  }

  ul#draggable
  {
   padding:0;
   margin:0;
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
  }

  ul#draggable li
  {
   display:block;
   margin:5px;
   border:solid #000 1px;
   height:50px;
   width:150px;
  }

  ul#sortable
  {
   padding:0;
   margin:0;
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
   height:380px;
   width:744px;
  }

  ul#sortable li
  {
   display:block;
   float:left;
   margin:5px;
   border:solid #000 1px;
   height:370px;
   width:50px;
   text-align:center;
  }
 </style>
</head>
<body>
    <form id="form1" action="">
  <div id="container1">
   <ul id="draggable">
    <li>1A</li>
    <li>2A</li>
    <li>3A</li>
    <li>4A</li>
    <li>5A</li>
    <li>6A</li>
    <li>7A</li>
    <li>8A</li>
    <li>9A</li>
    <li>10A</li>
    <li>11A</li>
    <li>12A</li>
   </ul>
  </div>
  <div id="container2">
   <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
   </ul>
  </div>
 </form>
</body>

How can I avoid the sortable events to fire until the item is dragged over the sortable container?

Thanks in advance

ansaurus

tags:

views:

answers:

Draggable+Sortable & Scrollable Divs

related questions