javascript - jQuery .draggable() 不拖动或拖动太多卡片

Question

我正在制作一个扑克牌网络应用程序。这个想法是你将卡片从一副牌拖到手牌/棋盘上，它会为你排名。网站功能正常；我只是无法让卡片能够从牌组拖到棋盘上。

1. Draggable 不适用于卡片，而是高亮显示卡片的文本。
2. Draggable 确实有效，但它拖动的卡片比我想要的要多。例如，我将尝试拖动方 block 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>

编辑:这里是 Jinja html:

<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 添加到你的 fiddle 中并且它有效(在 Chrome 和 FF 上检查)。查看:https://jsfiddle.net/wx5oz45g/1/ .唯一的其他变化是在 CSS 中将 cursor: pointer 添加到 .drag 类中，这样我就可以更好地了解应该响应的内容。