Javascript Can';不要让jQuery拖放工作

Javascript Can';不要让jQuery拖放工作,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试一个可以向用户提问的功能。将有8个可能的答案和2个答案槽。他们会将他们选择的答案拖到答案槽上,它应该接受他们选择的答案,然后禁用可拖放选项,这样就不能再拖放任何内容 我面临的问题是,即使在将一个可拖放元素放到它上面之后,可拖放元素仍然允许拖放更多的内容,并禁用了可拖放功能 我尽了最大的努力把它放到一个JSFiddle中让你看看,但是现在在这里,draggable也不起作用了 以下是我的JQuery的外观: $(init); function init() { $('.answer

我正在尝试一个可以向用户提问的功能。将有8个可能的答案和2个答案槽。他们会将他们选择的答案拖到答案槽上,它应该接受他们选择的答案,然后禁用可拖放选项,这样就不能再拖放任何内容

我面临的问题是,即使在将一个可拖放元素放到它上面之后,可拖放元素仍然允许拖放更多的内容,并禁用了可拖放功能

我尽了最大的努力把它放到一个JSFiddle中让你看看,但是现在在这里,draggable也不起作用了

以下是我的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);
}
以下是代码的链接:


任何帮助都将不胜感激

首先,在您的小提琴中没有包含jQuery或jQueryUI。您的控制台中会出现什么错误?哦,对了,对不起,我以前从未使用过JSFIDLE,只是在HTML的头中有一个重要的错误,我不得不删除它。但在控制台中,没有错误,这两个可拖放元素只是不会停止可拖放。不管我为什么要尝试禁用,这里有一个对代码的修改,对于初学者来说是可以拖动的:哦,非常感谢!所以基本上这就是我要说的,但是无论我做什么来禁用可拖放元素,一旦有东西被拖放,它都不会禁用