Question

我正在使用绑定到live（）mouseover事件的jQuery draggables / droppables。我正在使用live，因为我使用load（）来加载页面，并且需要在加载后访问这些元素。在Firefox和Safari中，我遇到了一种奇怪的行为，当我最初加载页面时，只有一些可放置的区域可以工作。但放弃可拖动的div，然后重新选择它们，他们再次神奇地工作。从奇怪的位置拖动拖动div有时会起作用。此外，在初始加载时，所有可放置区域都将起作用，但其中一些区域仅在最初“触摸”之后才起作用。这些初始激活触摸通常不直接在div上，但有时会偏离浏览器的一侧。无论如何，这是我的代码：

$(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);
    });

然后在链接的JS文件中：

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 = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
      }
      });

Answer 1

感谢＃jquery-ui上有帮助的人，我发现了这个问题。

问题是该事件仅在鼠标悬停时绑定，解释了不稳定的行为。

jQuery中不可预知的鼠标悬停行为

1 个答案: