Question

现在我正在创建拖放小部件，有3个问题以及3个答案。用户应该只能以任何顺序填写2个答案，并且应该禁用第3个丢弃区域，第3个丢弃区域可以是1到3个区域之间的任何区域。

点击提交按钮后，正确的答案应突出显示为绿色＆amp; RED中错了。

请告知如何在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>

Answer 1

小提琴不接受jquery UI，所以我为你创建了一个codepen。

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

我只是有一个'drop'和'out'的监听器（内置droppable方法）。我正在跟踪丢弃的答案数量，如果它们超过最大值，那么我不计算它们。如果拖出答案，则丢弃的计数会减少。如下图所示：

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');
    }
  }
});

我相信你可以从现在开始弄清楚逻辑。

如果您有任何问题，请与我们联系。

拖拽使用jquery下降？

1 个答案: