即使放入错误的可拖放对象，如何禁用可拖动对象

Question

我知道如何在将对象拖入正确的可拖放对象时禁用可拖动对象，如下所示，但在拖放到错误的可拖放对象时不知道。 我希望用户即使答案不正确也不能再次拖动，这意味着只能尝试一次。 我使用边缘动画，它使用与普通 JavaScript 不同的语法来获取元素，但其余部分相同。 下面是我的 cmets 代码。

for(j=0;j<35;j++){
    sym.$(answers1[j]).addClass('drag'+j);
    sym.$('.drag'+j).draggable({
    //revert: "invalid"   // I do not want revert in any case
    stop: function(){
        $(this).draggable('disabled');  // will disable when dropped anywhere
        //I want only when into the wrong droppable - 
        //so almost good but not quite right.
    }           
});

sym.$(droppables[j]).droppable({
    accept: ".drag"+j,
    drop: function(event,ui){
    ui.draggable.draggable( 'destroy' );  // the correct answer is disabled
    //I could have used 'disabled' here since it does the same as 'destroy'.
    } 
});

Answer 1

基本上，您的问题是，通过同时使用 accept 和 drop 选项，您使 drop 仅对接受的元素执行。

为了实现您想要的，您必须使用其他方式来定义 draggable 与其“正确”droppable 之间的关系。

例如您可以为每个包含接受的draggable 的类的droppable 添加一个数据属性（比如data-accept="drag1"）。 然后你可以从你的droppables 中删除accept 选项，并在他们的drop 处理程序中手动检查类是否匹配，比如

drop: function( event, ui ) {
   if (ui.draggable.hasClass( $(this).data('accept') )) { 
        // correct match
   }

   // anyway disable the draggable
   ui.draggable.draggable('disable');
}

这是一个演示：JSFiddle

Answer 2

在得到一些澄清后，我提供了这个替代解决方案。有多个答案和放置它们的位置，当删除 1 个答案时，应该不再接受答案，并且用户应该无法进一步移动该答案。

工作示例：https://jsfiddle.net/Twisty/crdxcg90/3/

HTML

<div>
  <h4>Put the family members in order of youngest to oldest.</h4>
  <p class="drag answer" id="1">Homer</p>
  <p class="drag answer" id="2">Marge</p>
  <p class="drag answer" id="3">Bart</p>
  <p class="drag answer" id="4">Lisa</p>
  <p class="drag answer" id="5">Maggie</p>
</div>

<div class="dropzone drop1" id="drop-1">Youngest</div>
<div class="dropzone drop2" id="drop-2">2</div>
<div class="dropzone drop3" id="drop-3">3</div>
<div class="dropzone drop4" id="drop-4">4</div>
<div class="dropzone drop5" id="drop-5">Oldest</div>

CSS

.drag {
  background: #ccc;
  padding: 3px;
  width: 60px;
  text-align: center;
  margin: 2px;
}

.dropzone {
  width: 100px;
  height: 50px;
  background: #0f0;
  float: left;
  text-align: center;
  margin: 2px;
}

.answered {
  background: #cfc;
}

JQuery

$(function() {
  $(".answer").draggable({
    revert: "invalid"
  });
  $(".dropzone").droppable({
    drop: function(e, ui) {
      $(e.target).addClass("answered");
      ui.draggable.draggable("destroy");
      $(this).droppable("option", "accept", function() {
        return false;
      });
    }
  });
});

您需要重新调整到您的具体作业，但如果答案的数量经常变化，这可能会让您更轻松并且更灵活。

更新

查看您的样本后，我可以看到更多您想要的东西。希望这会对您有所帮助：

https://jsfiddle.net/Twisty/crdxcg90/6/

var answers1 = [1, 3, 5];
var coins = 0;
$(function() {
  $(".answer").draggable({
    revert: "invalid"
  });
  $(".dropzone").droppable({
    drop: function(e, ui) {
      $(e.target).addClass("answered");
      var t = parseInt($(e.target).attr("id").substring(5));
      var a = parseInt(ui.draggable.attr("id"));
      if (answers1[t] === a) {
        $(e.target).addClass("correct");
        coins++;
      }
      ui.draggable.draggable("destroy");
      $(this).droppable("option", "accept", false);
      $("#coins").html(coins);
    },
    tolerance: "fit"
  });
});

当物体掉落时，它会检查answers1 中的位置，如果掉落与答案相符，我们会将其标记为正确并奖励一枚硬币。

Answer 3

这是在 Edge Animate 中完成的最终且正确的方法。 在 Edge Animate 中使用 data() 的方式与普通的 javascript 和 html 略有不同。我们使用它是为了能够将数据值与变量 ID 的值进行比较。我们还为可​​拖动对象使用了一个类，并在 UI 中为没有可放置对象（干扰器）的可拖动对象添加了该类，因此它们仍然可以被拖动并放置在可放置对象中并充当所有其他可拖动对象。然后我们在 dropEvent 函数中添加了条件。

//'level1-D','level1-E','level1-F'  added the drag class in the UI for distractors.
var answers1 = [
'level1-A','level1-B','level1-C',
'level2-A','level2-B','level2-C',
'level3-A','level3-B','level3-C',
'level4-A','level4-B',
'level5-A','level5-B','level5-C',
'level6-A','level6-B','level6-C',
'level7-A','level7-B','level7-C','level7-D',
'level8-A','level8-B','level8-C','level8-D','level8-E',
'level9-A','level9-B','level9-C',
'level10-A','level10-B','level10-C',
];

var droppables = [
'dp0' ,'dp1' ,'dp2' ,'dp3' ,'dp4' ,'dp5' ,'dp8','dp6','dp7','dp9',
'dp10','dp13','dp11','dp12','dp15','dp16','dp14','dp19','dp17','dp20',
'dp18','dp23','dp22','dp21','dp25','dp24','dp27','dp26','dp28','dp29','dp30','dp31'
];

for(j=0;j<32;j++){
    // draggables
    sym.$(answers1[j]).addClass('drag');
    // droppables
    sym.$(droppables[j]).droppable({
    accept:'.drag',
    drop: dropEvent
    }).data('answer', answers1[j]);  // use data to be able to compare gives the same name as the draggables

}// end for loop
sym.$('.drag').draggable({
        revert : "invalid"      
});

k=0;
function dropEvent(event, ui){
    ui.draggable.draggable('option', 'revert' , false );
    ui.draggable.draggable('option','disabled', true ); 
    ui.draggable.position( { of: $(this), my: 'center', at: 'middle' } );
    ID = ui.draggable.attr("id").replace('Stage_','');
   if(ID == $(this).data('answer')){  // retrieve the data info and compare to ID 
       k++;
        sym.getSymbol("meter").play();
        sym.getSymbol("coinAnimation").play(0); 
        sym.$(ID + '-result').css({'opacity':1.0});
        sym.$("boxScore").html(k);
        sym.$("score").html(k+'/32');
        if (music.paused ) {
            correct.pause();    
        } else {
            correct.currentTime = 0;
            correct.play();
        }
    }// end if
}