使用 jQuery UI 分组元素和拖动组

Question

我在 jQuery UI 中使用 Draggable 和 Droppable 来创建纸牌纸牌游戏。如果一张被拖出的牌上面还有其他牌，并且所有这些牌都是下降的同花顺（如this example 中的 5 个梅花），则所有这些牌都应立即被拖动并附加到它们被丢弃的牌上。

我试图通过在draggable();的start事件中添加一些代码来解决这个问题：

var thisAndAllNextCards = $(this).nextAll().addBack();

if (thisAndAllNextCards.length > 1) {
  $(thisAndAllNextCards).each(function(){
    if ($(this).data("value") == $(this).next('.card').data("value") +1 $(this).data("value") == $(this).next('.card').data("value") +1 && $(this).data("suit") == $(this).next('.card').data("suit")) {

      $(this).nextAll().addBack().wrapAll( "<div class='cardGroup'/>");

      /* All the cards in the variable thisAndAllNextCards (i.e. all the cards in the div with class 'cardGroup')
         should be dragged as a group and appended to the card they are dropped onto */

    }
  });
}

代码检查卡片是否处于下降同花顺，如果是，则将它们包装在一个临时 div 中。然后我被卡住了。卡片的位置搞砸了，我不知道如何拖动包装 div 而不是点击的卡片。我什至不知道我将卡片包装在新 div 中的想法是否好。

我的问题： 如何在同花顺中选择卡片，在拖动它们时将它们保持在原位（视觉上和 DOM 中），然后将它们附加到它们被放置到的卡片上？

点击下面的显示代码sn-p查看完整的代码。

$(document).ready(function(){

    var column1 = [];
    var column2 = [];
    var column3 = [];
    var column4 = [];
    var column5 = [];
    var column6 = [];
    var column7 = [];
    var column8 = [];
    var column9 = [];
    var column10 = [];
    
    var decksAmount = 2;
    var suits = ["spades", "diamonds", "clubs", "hearts"];
    var values = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
    var unshuffledDeck;
    var shuffledDeck;
    
    init();
    appendCardsToColumns();

    function init() {

        unshuffledDeck = getUnshuffledDeck();
    
        shuffledDeck = shuffleDeck(unshuffledDeck);

        divideCardsInColumns(shuffledDeck);

    }

    function getUnshuffledDeck() {
        
        var deck = new Array();

        var id = 1;
        
        for (var y = 0; y < decksAmount; y++ ) {
            for(var i = 0; i < suits.length; i++) {
                for(var x = 0; x < values.length; x++) {
                    var card = {value: values[x], suit: suits[i], status: 'hidden', class: 'card', id: id, 'status': 'hidden'};
                    id++
                    deck.push(card);
                }
            }
        }

        return deck;
    }
    
        
    function shuffleDeck(array) {
        
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }

        return array;
      
    }

    function divideCardsInColumns(cards) {


        $(cards).slice(0, 6).each(function(index) {
            column1.push(this);
        });

        $(cards).slice(6, 12).each(function(index) {
            column2.push(this);
        });

        $(cards).slice(12, 18).each(function(index) {
            column3.push(this);
        });

        $(cards).slice(18, 24).each(function(index) {
            column4.push(this);
        });

        $(cards).slice(24, 29).each(function(index) {
            column5.push(this);
        });

        $(cards).slice(29, 34).each(function(index) {
            column6.push(this);
        });

        $(cards).slice(34, 39).each(function(index) {
            column7.push(this);
        });

        $(cards).slice(39, 44).each(function(index) {
            column8.push(this);
        });

        $(cards).slice(44, 49).each(function(index) {
            column9.push(this);
        });

        $(cards).slice(49, 54).each(function(index) {
            column10.push(this);
        });

    }

    function appendCardsToColumns() {

        var columns = [];

        columns.push(column1, column2, column3, column4, column5,column6, column7, column8, column9, column10);

        $(columns).each(function(index) {

            var column = $(".column")[index];

            var numberOfCardsInColumn = this.length;

            $(this).each(function(index) {

                $('<div id="' + this.id + '" class="' + this.class + '" data-value="' + this.value + '" data-suit="' + this.suit + '" data-status="' + this.status + '">' + this.value + " of " + this.suit + '<div/>').appendTo(column);

                // Get last card in column
                var lastCard = index == numberOfCardsInColumn -1;

                // Make last card in column draggable and open after it has been appended
                if (lastCard) {
                    $("#" + this.id).attr("data-status","open");
                    $("#" + this.id).draggable({ revert: 'invalid' });
                }

            });

        });

        initializeDragAndDrop();

        function initializeDragAndDrop() {

            // Make open cards droppable and only accept a cards with a value one less than itself
            $(".card[data-status='open']").droppable({     

                accept: function(d) {

                    if ($(d[0]).data("value") == $(this).data("value") -1) {

                        return true;

                    }

                }

            });

            $( ".card[data-status='open']" ).draggable({

                start: function( event, ui ) {

                    var allZIindex = [];
                    
                    $('.card').each(function(){

                        if ($(this)[0].style.zIndex == null) {
                            $(this)[0].style.zIndex = 1;
                        }

                        allZIindex.push($(this)[0].style.zIndex);

                    });

                    var highestZIndex = Math.max.apply(Math, allZIindex);

                    $(this)[0].style.zIndex = highestZIndex + 1;

                    var thisAndAllNextCards = $(this).nextAll().addBack();

                    if (thisAndAllNextCards.length > 1) {
                        $(thisAndAllNextCards).each(function(){
                            if ($(this).data("value") == $(this).next('.card').data("value") +1 && $(this).data("suit") == $(this).next('.card').data("suit")) {

                              $(this).nextAll().addBack().wrapAll( "<div class='cardGroup'/>");

                                // All the cards in the variable thisAndAllNextCards (i.e. all the cards in div with class 'cardGroup') should be dragged as a group and appended to the droppable when dropped

                            }
                        });
                    }
                    
                }

            });

        }

        $( ".card" ).on( "drop", function( event, ui ) {

            $(ui.draggable).prev().attr("data-status","open");

            $(ui.draggable).prev().draggable({ revert: 'invalid' });

            $(ui.draggable).insertAfter('#' + $(this).attr("id"));

            $(ui.draggable).css('top', '').css('left', '');

            initializeDragAndDrop();

        } );

    }


});

.some-page-wrapper {
    margin: 15px;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    /*border: 1px solid;*/
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    height: 100vh;
    margin-left: 2px;
    margin-right: 2px;
}


.card[data-status='hidden'] {
    background-color: DarkGray;
    color: DarkGray;
}

.card {
  background-color: LightGray;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  font-size: 1vw;
  border-radius: 3px;
  height: calc(8vw * 1.4);
  width: 8vw;
  position: relative;
  margin-top: -10vw;
}

.column .card:first-child {
    margin-top: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spindelharpan</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>
</head>

<body>

<div class='some-page-wrapper'>
    <div class='row'>
        <div class='column' id='column1'></div>
        <div class='column' id='column2'></div>
        <div class='column' id='column3'></div>
        <div class='column' id='column4'></div>
        <div class='column' id='column5'></div>
        <div class='column' id='column6'></div>
        <div class='column' id='column7'></div>
        <div class='column' id='column8'></div>
        <div class='column' id='column9'></div>
        <div class='column' id='column10'></div>
    </div>
</div>

</body>

</html>

Answer 1

考虑以下几点：

$(function() {

  function lastDownClick(c) {
    var lastCard = $(".down .card:last", c);
    lastCard.click(function() {
      makeUpDeck(c);
    });
  }

  function makeUpDeck(c) {
    var lastCard = $(".down .card:last", c).detach();
    var up = $("<div>", {
        class: "up"
      })
      .draggable({
        handle: "div.card:first",
        revert: "invalid",
        zIndex: 1000
      })
      .droppable({
        accept: function(d) {
          var lastCard = $(".card:last", this);
          if (d.hasClass("card")) {
            if (d.data("value") == (lastCard.data("value") - 1)) {
              return true;
            }
          } else {
            if ($(".card:eq(0)", d).data("value") == (lastCard.data("value") - 1)) {
              return true;
            }
          }
          return false;
        },
        drop: function(e, ui) {
          var cards;
          if (ui.draggable.hasClass("card")) {
            cards = ui.draggable.css({
              top: "",
              left: ""
            });
          } else {
            cards = ui.draggable.children().detach();
          }
          $(this).append(cards);
          if (!ui.draggable.hasClass("card")) {
            ui.draggable.remove();
          }
          if ($(this).children().length >= 2) {
            singleDrag($(".card:last", this));
          }
        }
      })
    lastCard.attr("data-status", "open").appendTo(up);
    up.appendTo(c);
    lastDownClick(c);
  }

  function singleDrag(card) {
    card.draggable({
      revert: "invalid",
      zIndex: 1000
    });
  }

  var column1 = [];
  var column2 = [];
  var column3 = [];
  var column4 = [];
  var column5 = [];
  var column6 = [];
  var column7 = [];
  var column8 = [];
  var column9 = [];
  var column10 = [];

  var decksAmount = 2;
  var suits = ["spades", "diamonds", "clubs", "hearts"];
  var values = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
  var unshuffledDeck;
  var shuffledDeck;

  init();
  appendCardsToColumns();

  function init() {
    unshuffledDeck = getUnshuffledDeck();
    shuffledDeck = shuffleDeck(unshuffledDeck);
    divideCardsInColumns(shuffledDeck);
  }

  function getUnshuffledDeck() {
    var deck = new Array();
    var id = 1;
    for (var y = 0; y < decksAmount; y++) {
      for (var i = 0; i < suits.length; i++) {
        for (var x = 0; x < values.length; x++) {
          var card = {
            value: values[x],
            suit: suits[i],
            status: 'hidden',
            class: 'card',
            id: id,
            'status': 'hidden'
          };
          id++
          deck.push(card);
        }
      }
    }

    return deck;
  }


  function shuffleDeck(array) {

    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }

    return array;

  }

  function divideCardsInColumns(cards) {
    $(cards).slice(0, 6).each(function(index) {
      column1.push(this);
    });
    $(cards).slice(6, 12).each(function(index) {
      column2.push(this);
    });
    $(cards).slice(12, 18).each(function(index) {
      column3.push(this);
    });
    $(cards).slice(18, 24).each(function(index) {
      column4.push(this);
    });
    $(cards).slice(24, 29).each(function(index) {
      column5.push(this);
    });
    $(cards).slice(29, 34).each(function(index) {
      column6.push(this);
    });
    $(cards).slice(34, 39).each(function(index) {
      column7.push(this);
    });
    $(cards).slice(39, 44).each(function(index) {
      column8.push(this);
    });
    $(cards).slice(44, 49).each(function(index) {
      column9.push(this);
    });
    $(cards).slice(49, 54).each(function(index) {
      column10.push(this);
    });
  }

  function appendCardsToColumns() {
    var columns = [];
    columns.push(column1, column2, column3, column4, column5, column6, column7, column8, column9, column10);
    $(columns).each(function(index) {
      var column = $(".column")[index];

      var numberOfCardsInColumn = this.length;

      $(this).each(function(index) {

        $('<div id="' + this.id + '" class="' + this.class + '" data-value="' + this.value + '" data-suit="' + this.suit + '" data-status="' + this.status + '">' + this.value + " of " + this.suit + '<div/>').appendTo($(".down", column)).disableSelection();

        // Get last card in column
        var lastCard = index == numberOfCardsInColumn - 1;

        // Make last card in column draggable and open after it has been appended
        if (lastCard) {
          makeUpDeck($(column));
        }
      });
    });

    initializeDragAndDrop();

    function initializeDragAndDrop() {

      // Make open cards droppable and only accept a cards with a value one less than itself
      var up = $(".card[data-status='open']").closest(".up");

      /*
      if (up.children().length > 1) {
        $(".card[data-status='open']").draggable({
          start: function(event, ui) {
            var allZIindex = [];
            $('.card').each(function() {
              if ($(this)[0].style.zIndex == null) {
                $(this)[0].style.zIndex = 1;
              }
              allZIindex.push($(this)[0].style.zIndex);
            });
            var highestZIndex = Math.max.apply(Math, allZIindex);
            $(this)[0].style.zIndex = highestZIndex + 1;
            var thisAndAllNextCards = $(this).nextAll().addBack();
            if (thisAndAllNextCards.length > 1) {
              $(thisAndAllNextCards).each(function() {
                if ($(this).data("value") == $(this).next('.card').data("value") + 1 && $(this).data("suit") == $(this).next('.card').data("suit")) {
                  $(this).nextAll().addBack().wrapAll("<div class='cardGroup'/>");
                  // All the cards in the variable thisAndAllNextCards (i.e. all the cards in div with class 'cardGroup') should be dragged as a group and appended to the droppable when dropped
                }
              });
            }
          }
        });
      }
      */
    }

    /*
    $(".card").on("drop", function(event, ui) {
      $(ui.draggable).prev().attr("data-status", "open");
      $(ui.draggable).prev().draggable({
        revert: 'invalid'
      });
      $(ui.draggable).insertAfter('#' + $(this).attr("id"));
      $(ui.draggable).css('top', '').css('left', '');
      initializeDragAndDrop();
    });
    */
  }
});

.some-page-wrapper {
  margin: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  /*border: 1px solid;*/
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100vh;
  margin-left: 2px;
  margin-right: 2px;
}

.column .down {}

.column .up {
  margin-top: -10vw;
}

.card[data-status='hidden'] {
  background-color: DarkGray;
  color: DarkGray;
}

.card {
  background-color: LightGray;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  font-size: 1vw;
  border-radius: 3px;
  height: calc(8vw * 1.4);
  width: 8vw;
  position: relative;
  margin-top: -10vw;
}

.column .card:first-child {
  margin-top: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column' id='column1'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column2'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column3'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column4'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column5'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column6'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column7'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column8'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column9'>
      <div class="down">
      </div>
    </div>
    <div class='column' id='column10'>
      <div class="down">
      </div>
    </div>
  </div>
</div>

有了更多的辅助函数，你可以很容易地做很多事情。我选择了down 和up 甲板集装箱。这个例子没有解决或解决空列的问题，但可以很容易地设置。

所有列都从下层甲板开始，没有上层甲板。在初始化期间，顶牌被“翻转”并且可以被拖到其他牌组。然后附加到该上层甲板。要移动整个牌组，可以拖动最后一张牌作为手柄。由于您可能还需要将顶部卡片设置为拖动，因此需要特殊条件。

还要注意，用户可以右键单击并检查卡片。然后他们可以看到数据属性。您可以考虑不使用attr()，而是使用data()。