jQuery .draggable() 要么不拖动，要么拖动太多卡片答案

【问题标题】：jQuery .draggable() either doesn't drag or drags too many cardsjQuery .draggable() 要么不拖动，要么拖动太多卡片
【发布时间】：2015-07-20 00:34:39
【问题描述】：

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

可拖动在卡片上不起作用，而是突出显示卡片的文本。
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>

编辑：这是 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>

【问题讨论】：

看来是对的...你能发布 jinja 生成的 html 吗？（在浏览器中使用 ctrl+u）
我用它进行了编辑。
如果您需要帮助，需要一个可以复制此内容的演示。很难对我们看不到的 UI 进行故障排除
jsfiddle.net/timredd13/csdxdhrt

标签： javascript jquery twitter-bootstrap flask

【解决方案1】：

奇怪，但您似乎只是忘记将 jQuery UI 添加到您的脚本中。我在你的小提琴中添加了 jQuery UI，它可以工作（在 Chrome 和 FF 上检查）。看看：https://jsfiddle.net/wx5oz45g/1/。唯一的其他变化是将 CSS 中的 cursor: pointer 添加到 .drag 类中，这样我可以更好地看到应该响应的内容。

【讨论】：