jquery - 使用 jQuery UI 对元素进行分组和拖动组-6ren

jquery - 使用 jQuery UI 对元素进行分组和拖动组

转载作者：行者123 更新时间：2023-11-27 22:58:16

我正在使用 Draggable和 Droppable在 jQuery UI 中创建纸牌游戏。如果一张拖动的牌上面有其他牌，并且所有这些牌都是下降的同花顺(比如 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 中)，然后将它们附加到放置它们的卡片上？

点击下方的显示代码片段以查看完整代码。

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

最佳答案

考虑以下几点:

$(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 甲板容器。这个例子没有解决或解决空列的问题，但可以很容易地设置。

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

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

关于jquery - 使用 jQuery UI 对元素进行分组和拖动组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59127322/

文章推荐： html - 基于数组值的 ngStyle 表

文章推荐： javascript - 如何在调用一个 Action 后调用另一 Action ？

文章推荐： javascript - 凹凸贴图对 Three.js 中的纹理没有影响

Vim - 如何使用 smartcase 进行/搜索，而使用 noic 进行 * 搜索？
我喜欢 smartcase，也喜欢 * 和 # 搜索命令。但我更希望 * 和 # 搜索命令区分大小写，而/和 ?搜索命令遵循 smartcase 启发式。是否有隐藏在某个地方我还没有找到的设置？我宁
通过 SSH 进行 SSH(或如何通过 SSH 进行 'proxify' SSH)
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 10年前关闭。 Improve this qu
java - 使用一个 LDAP 进行 AD 身份验证失败，但使用另一 LDAP 进行 AD 身份验证通过
从以下网站，我找到了执行java AD身份验证的代码。 http://java2db.com/jndi-ldap-programming/solution-to-sslhandshakeexcepti
r - 在哪些情况下，人们更喜欢通过 reshape 进行 melt 而不是通过 plyr 进行 ddply？我正在努力学习它们，它们看起来很相似
似乎 melt 会使用 id 列和堆叠的测量变量 reshape 您的数据框，然后通过转换让您执行聚合。 ddply，从 plyr 包看起来非常相似..你给它一个数据框，几个用于分组的列变量和一个聚合
caching - 为什么 Facebook 在 memcached 中使用 TCP 进行 SET 和 UDP 进行 GET
我的问题是关于 memcached。 Facebook 使用 memcached 作为其结构化数据的缓存，以减少用户的延迟。他们在 Linux 上使用 UDP 优化了 memcached 的性能。 h
java - 在 Camel route ，使用 exec 组件使用 grep 进行 curl ，但使用 ${HOSTNAME} 进行 grep 无法正常工作
在 Camel route ，我正在使用 exec 组件通过 grep 进行 curl ，但使用 ${HOSTNAME} 的 grep 无法正常工作，下面是我的 Camel 路线。请在这方面寻求帮助。
django - 进行 "not in"查询
我正在尝试执行相当复杂的查询，在其中我可以排除与特定条件集匹配的项目。这是一个 super 简化的模型来解释我的困境: class Thing(models.Model) user = mod
django - 进行 "not in"查询
我正在尝试执行相当复杂的查询，我可以在其中排除符合特定条件集的项目。这里有一个 super 简化的模型来解释我的困境: class Thing(models.Model) user = mod
angular - 进行 Angular 内容投影的现代方法是什么？
我发现了很多嵌入/内容项目的旧方法，并且我遵循了在这里找到的最新方法(我假设):https://blog.angular-university.io/angular-ng-content/ 我正在尝试
使用 NextJS 进行 Fastify
我正在寻找如何使用 fastify-nextjs 启动 fastify-cli 的建议我曾尝试将代码简单地添加到建议的位置，但它不起作用。 'use strict' const path = req
javascript - 进行 gatsby 构建时未定义窗口
我正在尝试将振幅 js 与 React 和 Gatsby 集成。做 gatsby developer 时一切看起来都不错，因为它发生在浏览器中，但是当我尝试 gatsby build 时，我收到以下错
java - 进行 Null 检查的频率和位置
我试图避免过度执行空值检查，但同时我想在需要使代码健壮的时候进行空值检查。但有时我觉得它开始变得如此防御，因为我没有实现 API。然后我避免了一些空检查，但是当我开始单元测试时，它开始总是等待运行时异
使用 NOT 进行 Kibana 搜索
尝试进行包含一些 NOT 的 Kibana 搜索，但获得包含 NOT 的结果，因此猜测我的语法不正确: "chocolate" AND "milk" AND NOT "cow" AND NOT "tr
iphone - 进行 Facebook 集成时出错
我正在使用开源代码共享包在 iOS 中进行 facebook 集成，但收到错误“FT_Load_Glyph failed: glyph 65535: error 6”。我在另一台 mac 机器上尝试了
r - 进行 Tobit 回归时的奇异性错误
我正在尝试估计一个标准的 tobit 模型，该模型被审查为零。变量是因变量 : 幸福自变量 : 城市(芝加哥，纽约)，性别(男，女)，就业(0=失业，1=就业)，工作类型(失业，蓝色，白色
从多个文件夹中对多个 jar 进行 gradle
我有一个像这样的项目布局样本/ 一种/ 源/ 主要的/ java / java 资源/ .jpg 乙/ 源/ 主要的/ java / B.java 资源/ B.jpg 构建.gradle 设置.gr
javascript - 进行 fetch 调用时出错
如何循环遍历数组中的多个属性以及如何使用map函数将数组中的多个属性显示到网页 import React, { Component } from 'react'; import './App.css'
javascript - 进行 AJAX 调用时加载程序不显示
我有一个 JavaScript 函数，它进行 AJAX 调用以返回一些数据，该调用是在选择列表更改事件上触发的。我尝试了多种方法来在等待时显示加载程序，因为它当前暂停了选择列表，从客户的 Angul
java - 进行 null 检查的更短方法
可能以前问过，但找不到。我正在用以下形式写很多语句: if (bar.getFoo() != null) { this.foo = bar.getFoo(); } 我想到了三元运算符，但我认
javascript - 进行 JavaScript 验证后短信消失
我有一个表单，在将其发送到 PHP 之前我正在执行一些验证 JavaScript，验证后的 JavaScript 函数会发布用户在中输入的文本。页面底部的标签；然而，此消息显示短暂，然后消失...

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 使用 jQuery UI 对元素进行分组和拖动组