如何触发 JQuery 中的更改？答案

【问题标题】：How do I trigger a change in JQuery?如何触发 JQuery 中的更改？
【发布时间】：2010-10-09 20:03:24
【问题描述】：

我是 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...

我知道代码可以正常工作，因为如果我将该类放在 HTML 中适当的

元素中，它就可以正常工作（只是非常缓慢）。

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

【问题讨论】：

标签： jquery

【解决方案1】：

设置哪些单元格可拖放到可拖动对象的开始事件中。

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

【讨论】：

嘿，我们都去过那里...... :)
别忘了在其他时候关闭 droppable。 .droppable('销毁')

【解决方案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');

等等

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

【讨论】：