-1

ここで本当に助けが必要です。ドロップ可能の選択方法に関する解決策が見つかりません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"が、セレクターはどうすればよいですか?

http://jsfiddle.net/4KLHs/

4

1 に答える 1

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/

于 2013-08-11T05:44:34.760 に答える