Question

我真的需要帮助。我无法找到有关如何选择class="cell active"的解决方案可放置的。你可以在下面看到我的代码。

$('.cell').droppable({
    drop: function(event, ui) {
        var pieceValue = ui.helper.data('value');
        var toBoard = $(this).data('square');
        var splitResult = toBoard.split(',')
        board[splitResult[0]][splitResult[1]] = pieceValue;

        $(this).append(ui.draggable);
    }
});

我想将class="cell active"用于droppable，但我的选择器应该是什么？

http://jsfiddle.net/4KLHs/

Answer 1

如果我了解您要查找的内容，那么您的选择器将为：$('.cell.active')

$('.cell.active').droppable({
    drop: function(event, ui) {
        var pieceValue = ui.helper.data('value');
        var toBoard = $(this).data('square');
        var splitResult = toBoard.split(',');
        board[splitResult[0]][splitResult[1]] = pieceValue;

        $(this).append(ui.draggable);
    }
});

在jsFiddle中查看你的代码，这就是我的建议：

  // Use this function to add the active class and tie the droppable interaction to
  function makeDroppable(element) {
      element.addClass('active');
      element.droppable({
          drop: function (event, ui) {
              var pieceValue = ui.helper.data('value');
              var toBoard = $(this).data('square');
              var splitResult = toBoard.split(',')
              board[splitResult[0]][splitResult[1]] = pieceValue;

              $(this).append(ui.draggable);
          }
      });
  }

然后我会将div传递给上面的函数，如下所示：

  $('.draggable').each(function (index, div) {

      $(div).draggable({
          snap: '#board',
          revertDuration: 500,
          cursor: 'move',
          opacity: 0.50,
          helper: 'clone',
          containment: '#board',
          revert: function (event, ui) {
              $(this).data("value").originalPosition = {
                  top: 0,
                  left: 0
              };
              return !event;
          },
          start: function () {
              var from = $(this).parent().attr('data-square');

              var splitSquare = from.split(',');
              splitSquare[0] = splitSquare[0];
              splitSquare[1] = splitSquare[1] - 2 + 2;
              var joinSquare = splitSquare.join();
              var div1 = $("div[data-square='" + joinSquare + "']");
              makeDroppable(div1); //<- pass in the element to the function

              splitSquare[0] = splitSquare[0];
              splitSquare[1] = splitSquare[1] - 2 + 3;
              var joinSquare = splitSquare.join();
              var div2 = $("div[data-square='" + joinSquare + "']");
              makeDroppable(div2); //<- pass in the element to the function

              splitSquare[0] = splitSquare[0];
              splitSquare[1] = splitSquare[1] - 2;
              var joinSquare = splitSquare.join();
              var div3 = $("div[data-square='" + joinSquare + "']");
              makeDroppable(div3); //<- pass in the element to the function

              splitSquare[0] = splitSquare[0] - 2 + 3;
              splitSquare[1] = splitSquare[1] - 2 + 3;
              var joinSquare = splitSquare.join();
              var div4 = $("div[data-square='" + joinSquare + "']");
              makeDroppable(div4); //<- pass in the element to the function

              splitSquare[0] = splitSquare[0] - 2;
              splitSquare[1] = splitSquare[1];
              var joinSquare = splitSquare.join();
              var div5 = $("div[data-square='" + joinSquare + "']");
              makeDroppable(div5); //<- pass in the element to the function
          }
      });
  });

http://jsfiddle.net/4KLHs/1/

如何选择2类作为droppable？

1 个答案: