Группируйте элементы и перетаскивайте группы с помощью jQuery UI - PullRequest
Новая
       63

Группируйте элементы и перетаскивайте группы с помощью jQuery UI

0 голосов
/ 01 декабря 2019

Я использую Draggable и Droppable в пользовательском интерфейсе jQuery для создания карточной игры Solitaire. Если у перетаскиваемой карты есть другие карты над ней, и все эти карты находятся в нисходящем стрит-флеше (например, 5 треф в в этом примере ), все эти карты должны быть перетащены сразу и добавлены к карте, если они

Я пытался решить эту проблему, добавив некоторый код 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 */

    }
  });
}

Код проверяет, находятся ли картынаходятся в нисходящем стрит-флеше и, если это так, оборачивают их во временное деление. Тогда я застрял. Расположение карт испорчено, и я не знаю, как перетащить упаковочный тег вместо карты, на которую нажали. Я даже не знаю, хороша ли моя идея оборачивать карты в новый div.

Мой вопрос: Как мне выбрать карты во флеше, сохранить их на месте (визуально и в DOM), перетаскивая их, а затем добавляя их на карту, на которую они сброшены?

Нажмите Показать фрагмент кода ниже, чтобы увидеть код целиком. 

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

1 Ответ

0 голосов
/ 02 декабря 2019

Рассмотрим следующее: 

$(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().

...