Как мне вызвать изменение в JQuery?

Question

Я новичок в JQuery, так что это, вероятно, очень тупой вопрос.

Я использовал JQuery, чтобы сделать элементы таблицы перетаскиваемыми. Я задал вопрос о том, как сделать это быстрее, и лучший ответ, который у меня был до сих пор, - отключить функцию сброса для всех ячеек и включать их только тогда, когда что-то перетаскивают.

На самом деле, для меня это имеет большой смысл, поскольку я хочу только перетаскивать ячейку на другую ячейку в той же строке. Так что мне нужно только применить капли к ячейкам в одном ряду. Итак, я делаю это:

$(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...

Я знаю, что код работает, потому что, если я помещаю этот класс в соответствующие элементы

в 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 в функции обработчика перетаскивания.

, например

 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');

и т.д.

Я бы предложил сделать все это в виде функции.