Question

我试图提供一个可以向用户提问的功能。将有8个可能的答案和2个答案位。他们会将他们选择的答案拖到答案位上，它应该接受他们的选择答案然后禁用droppable选项，这样就不能再删除了。

我遇到的问题是在将可拖动元素放到其上之后，可放置元素仍然允许删除更多元素并禁用可放置功能。

我尽力把它放到一个JSFiddle中让你看，但现在在这里可拖动的也没有工作。

这是我的JQuery的样子：

$(init);

function init() {
  $('.answers').draggable({
    containment: '#answerContainer',
    curser: 'move',
    revert: true,
    snap: ".droppable",
    stack: ".answers"
  });

  $('.wrongRest').draggable({
    containment: '#answerContainer',
    curser: 'move',
    revert: true,
    snap: ".droppable",
    stack: ".answers"
  });

  $('#answerSlotOne').droppable({
    accept: "#correctOne, #correctTwo, #wrongOne, #wrongTwo, #wrongThree, #wrongFour, #wrongFive, #wrongSix",
    hoverClass: 'defaultTextHover',
    drop: handleCardDropOne
  });

  $('#answerSlotTwo').droppable({
    accept: "#correctOne, #correctTwo, #wrongOne, #wrongTwo, #wrongThree, #wrongFour, #wrongFive, #wrongSix",
    hoverClass: 'defaultTextHover',
    drop: handleCardDropTwo
  });

  $("#submitForm").submit(function(e){
    e.preventDefault();
    if(cardsDropped != 2){
      alert("You must choose two options here to continue!");
    }
  });
}

function handleCardDropOne(event, ui) {
  var cardValue = ui.draggable.attr('class');
  cardsDropped++;

  ui.draggable('disable');
  $('#answerSlotOne').droppable({
    disabled: "true"
  });
  ui.draggable.position({ of: $(this),
    my: 'left top',
    at: 'left top'});
  ui.draggable.draggable('option', 'revert', false);

}

function handleCardDropTwo(event, ui) {
  var cardValue = ui.draggable.attr('id');
  var name = $(this).attr('id');
  alert(name);
  cardsDropped++;

  ui.draggable('disable');
  $('#answerSlotTwo').droppable('disable');
  ui.draggable.position({ of: $(this),
    my: 'left top',
    at: 'left top'});
  ui.draggable.draggable('option', 'revert', false);
}

这是代码的链接： https://jsfiddle.net/66frwrz2/

任何帮助都会受到大力赞赏！

无法使jQuery拖放工作

0 个答案: