jQuery .draggable（）不會拖動或拖動太多的卡片

我正在爲撲克牌製作一個Web應用程序。這個想法是你從一副牌中拖出一張牌到一張牌或一張牌，然後它會爲你排名。該網站的功能工作;我只是無法讓卡片能夠從甲板拖到板子上。jQuery .draggable（）不會拖動或拖動太多的卡片

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>

編輯：這裏的神社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>

來源

2015-07-20 Redd

這似乎是正確的...你能發佈jinja生成的html嗎？（在瀏覽器中使用ctrl + u） – jperelli

我用它編輯了一個編輯。 – Redd

如果你需要幫助，需要一個複製這個的演示。很難排除用戶界面的故障，我們無法看到 – charlietfl

奇怪，但它看起來像你只是忘了jQuery用戶界面添加到您的腳本。我將jQuery UI添加到了你的小提琴中，它可以工作（在Chrome和FF上進行檢查）。檢查出來：https://jsfiddle.net/wx5oz45g/1/。只有其他變化是在CSS中添加cursor: pointer到.drag，這樣我才能更好地看到應該響應的內容。

來源

2015-07-20 12:05:34 Episodex

jQuery .draggable（）不會拖動或拖動太多的卡片

回答

相關問題