Question

我正在为扑克牌制作一个网络应用程序。这个想法是你将牌从牌组拖到手牌/板上，并为你排名。网站的功能有效;我只是不能让牌能够从牌组拖到棋盘上。

Draggable不会在卡片上工作，而是会突出显示卡片的文字。
Draggable确实有效，但它拖的卡多于我想要的卡。例如，我试图拖动3颗钻石，由于某种原因它会抓住所有3颗钻石和4颗钻石。

如何拖动单张卡正常工作？

.card {
  height: 9.2em;
  width: 6.61em;
  padding-left: .2em;
  font-size: 12px;
  margin:.2em;
  float:left;
  clear:both;
  position: relative; }

<div class="container-fluid" id="deck">
    {% for card in deck %}
        <div class="drag">
            <div id="{{card.rank}}{{card.suit}}" class="card rank{{ card.rank }}{{ card.suit }}">
                {{ card.rank }} <br/> &{{ card.suit_verbose }};
            </div>
        </div>
    {% endfor %}
</div>

<script>
    $(function() {
        $(".drag").draggable();
    });
</script>

<div class="container" id="wrapper">
    <h1 class="container text-center">
        two pair
    </h1>
    <div class="panel panel-default" id="canvas">
        <div class="container-fluid" id="board">          
                <div class="row col-md-1">
                    <span class="card empty"/>
                </div>            
                <div class="row col-md-1">
                    <span class="card empty"/>
                </div>

                ...

        </div>
    </div>
</div>

Answer 1

奇怪，但看起来你只是忘了在脚本中添加jQuery UI。我在你的小提琴中添加了jQuery UI，它可以工作（在Chrome和FF上查看）。看看：https://jsfiddle.net/wx5oz45g/1/。只有其他更改是将CSS中的O(n log(n))添加到类cursor: pointer中，这样我才能更好地了解应该响应的内容。

jQuery .draggable（）要么拖拽或拖动太多卡

1 个答案: