Unpredictable mouseover behaviour in jQuery
<p>I am using jQuery draggables/droppables bound to a live() mouseover event. I'm using live because I use load() to load a page, and need those elements accessible after the load. In Firefox and Safari, I'm getting a strange behavior where when I initially load the page, only some of the droppable areas work. But upon letting go of the draggable div, then reselecting it, they magically work again. Dragging the drag div from strange locations sometimes works. Also, upon initial load, all droppable areas will work, but some of them only after initially "touched". These initial activating touches are often not directly over the div, but sometimes way off to the side of the browser. Anyways, here's my code:</p>

<pre><code>$(document).ready(function() {

  // Load main report object
  function reload_report() {
    $('#report').load('{% url timetracker.views.project_report report_id=report_meta.id %}');
  }

  reload_report();

  // Binding dragging events
  $('.worklog-row').live('mouseover', function () {
      drag_worklogs(this);
      return false;
    });

  // Binding dropping events
  $('.dropTarget').live('mouseover', function () {
      drop_worklogs(this, '{% url timetracker.views.move_worklogs report_id=report_meta.id %}', 'drop-hover', reload_report);
    });
</code></pre>

<p>Then in the linked JS file:</p>

<pre><code>function drop_worklogs($this, post_url, hover_class, callback) {
  $($this).droppable({
      tolerance: 'pointer',
      hoverClass: hover_class, 
      drop: function(event, ui) {
    // Get ids of dropped worklogs
    var worklogs = [];
    ui.helper.children().each(function() {
        var id = this.id;
        id = id.split('-')[1];
        worklogs.push(id);
        });
    var groupStr = $($this).attr('id');

    var typeStr;

    typeStr = groupStr.split('-')[0];
    groupStr = groupStr.split('-')[1];

    var requestArr = {
      worklogs: worklogs,
      group: groupStr,
      type: typeStr
    };

    var requestData = JSON.stringify(requestArr);
    //alert(requestData);

    // Send to server via POST request
    var success = false;
    $.post(post_url, { move: requestData }, function() {}, "json");
    callback();

      }
      });
}

function drag_worklogs($this) {
  // Drag and drop
  $($this).draggable({
    helper:function() {
      var selected = $('input:checked').parents('tr');
      if (selected.length === 0) {
    selected = $($this);
      }
    var container = $('&lt;div/&gt;').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
      }
      });
</code></pre>
