使用jquery拖放？

現在我正在創建拖放小部件，有3個問題以及3個答案。用戶應該只能按任意順序填寫2個答案，第3個放置區域應該被禁用，第3個放置區域可以是1到3個區域之間的任何區域。使用jquery拖放？

提交按鈕被點擊後，正確的答案應該在綠色&高亮顯示錯誤的紅色。

請指教如何在jQuery的

$(function(){ 
    $(".drop,").droppable(); 
    $(".drag").draggable({ 
     revert: 'invalid' 
    }); 
});

HTML

  <div class="drag text-center"></div> 
      <div class="drag text-center"></div> 
      <div class="drag text-center"></div> 

      <div class="drop text-center"></div> 
      <div class="drop text-center"></div> 
      <div class="drop text-center"></div>

來源

2017-02-17 vkfjs

撥弄不接受jQuery UI的事，所以我創建了一個codepen你。

http://codepen.io/zsawaf/pen/OWYgNg

我只是有「降」和「出」（建於方法可放開）的監聽器。我正在追蹤掉落的答案數量，如果超過了最大值，那麼我就不會計算它們。如果答案被拖出，則丟棄的計數會減少。如下圖所示：

var self = this;

// make questions droppable 
$('.droppable').droppable({ 
    drop: function(event, ui) { 
    var $answer_dropped = $(this); 

    self.dropped += 1; 
    if (self.dropped <= self.max_allowed) { 
     $answer_dropped.addClass('dropped'); 
    } 
    else { 
     self.dropped = self.max_allowed; // cap out at max 
    } 
    }, 
    out: function(event, ui) { 
    var $answer_out = $(this); 

    if ($answer_out.hasClass('dropped')) { 
     self.dropped -= 1; 
     $answer_out.removeClass('dropped'); 
    } 
    } 
});

我相信你可以從現在開始計算邏輯。

讓我知道如果您有任何問題。

來源

2017-02-17 21:08:50 zsawaf

它工作正常。 – vkfjs

我想要做的就是我之前提到的一件事。點擊提交按鈕後，正確答案應以綠色突出顯示並在RED中出錯。 – vkfjs

@vkfjs我的意圖是指出你在正確的方向，而不是寫出整個解決方案哈。無論如何，現在你只需要有一個提交按鈕，將你的答案發送到你的後端，檢查他們是否是正確的答案，然後在你的回調中根據你的回答是錯誤還是正確的將答案添加到答案元素中。 – zsawaf

使用jquery拖放？

回答

相關問題