Question

我是JQuery的新手，所以这可能是一个非常愚蠢的问题。

我使用JQuery使表中的元素可拖动。我问a question如何让它更快，我到目前为止所做的最好的反应是禁用所有单元格的droppable，并且只在拖动某些东西时启用它们。

实际上，对我来说，这很有意义，因为我只想将一个单元格拖到同一行的另一个单元格中。所以我只需要将droppable应用于同一行中的单元格。所以，我这样做：

$(document).ready
(
  function()
  {
    $('.draggable_div').draggable
    (
      {
        addClasses: false,
        scroll: false,
        axis: 'x',
        start: function(event, ui)
        {
          $(this).css('background-color','#ddddff');
          var $cells = $(this).parent().parent().children();
          $cells.addClass("droppable_td");
        }
      }
    );

...

Firebug告诉我，我已成功将“draggable_td”类添加到右行的单元格中。但是，我该如何触发变化呢？我现在设置代码的方式，droppable附加如下：

  $('.droppable_td').droppable
  (
    {
      addClasses: false,
      over: function(event, ui)
      {
        $(this).css('background-color', '#ccffcc');
      },
      out: function(event, ui)
      {
        $(this).css('background-color', null);
      },
      drop: function(event, ui)
      {

etc...

我知道代码有效，因为如果我将该类放在适当的＆lt; TD＆GT; HTML中的元素一切正常（只是非常缓慢）。

换句话说：如果我从一开始就让所有单元格都可以删除，那就可以了。如何动态更改单元格以使其因事件而可以删除？

Answer 1

在可拖动的启动事件中设置哪些单元格可放置。

start: function(event, ui)
{
  $(this).css('background-color','#ddddff');
  var $cells = $(this).parent().parent().children();
  $cells.addClass("droppable_td");
  $cells.droppable({...});
}

Answer 2

我认为，当您调用droppable（）时，您将单元格设置为droppable，因此您需要在拖动处理函数中调用droppable。

e.g。

 start: function(event, ui)
    {
      $(this).css('background-color','#ddddff');
      var $cells = $(this).parent().parent().children();
      $cells.addClass("droppable_td");
      $('.droppable_td').droppable
      (
        {
          addClasses: false,
          over: function(event, ui)
         {
           $(this).css('background-color', '#ccffcc');

等

我建议把所有这些都变成一个函数。

如何触发JQuery中的更改？

2 个答案: