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

2023年3月24日 217次阅读

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

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

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

最佳答案 奇怪,但看起来你只是忘了在脚本中添加jQuery UI.我在你的小提琴中添加了jQuery UI,它可以工作(在Chrome和FF上查看).看看：
https://jsfiddle.net/wx5oz45g/1/.只有其他的变化是将CSS中的指针添加到类.drag中,这样我才能更好地看到应该响应的内容.

点赞