jquery - 使用jQuery UI对元素进行分组和拖动分组(Group elements and drag group with jQuery UI)

Question

I'm using Draggable and Droppable in jQuery UI to create a Solitaire card game.

(我在jQuery UI中使用Draggable和Droppable来创建纸牌纸牌游戏。)

If a dragged card has other cards over it and all these cards are in a descending straight flush (like 5 of clubs in this example ), all these cards should be dragged at once and appended to the card the they are dropped onto.

(如果被拖动的牌上面有其他牌，并且所有这些牌都是顺着下降的平齐排列（例如本示例中的 5个球杆），则应立即将所有这些牌拖动并附加到放下的牌上。)

I've tried to solve this by adding some code the start event of draggable();

(我试图通过添加一些代码来解决此问题，方法是draggable();的start事件draggable();)

:

(：)

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 */

    }
  });
}

The code checks wether the cards are in a descending straight flush and, if so, wraps them in a temporary div.

(代码检查卡片是否处于下降的同花顺状态，如果是，则将它们包装在临时div中。)

Then I'm stuck.

(然后我被卡住了。)

The positioning of the cards gets messed up and I don't know how to drag the wrapping div instead of the clicked card.

(卡的位置搞砸了，我不知道如何拖动包装的div而不是单击的卡。)

I don't even know if my idea of wrapping the cards in a new div is good.

(我什至不知道将卡片包装在新的div中的想法是否很好。)

My question: How do I select the cards in the flush, keep them in place (visually and in DOM) while dragging them and then append them to the card they are dropped onto?

(我的问题：如何选择同花顺的卡，将它们拖动到位（在视觉上和在DOM中），然后将其附加到放下的卡上？)

Click Show code snippet below to see the code in it's entirety.

(点击下面的显示代码段以查看完整的代码。)

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

  ask by Allan_Slade translate from so

Answer 1

等待大神答复