使用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拖放？

回答

相关问题