在新类 jQuery 上启用可拖动

enabling draggable on new class jquery

本文关键字：拖动 启用 新类 jQuery      更新时间：2023-09-26

我有两个项目数组。一个是图像，另一个是文字。这些构成了学生的拖放活动。拖动到字词的图像会将类分配为.right或.wrong，具体取决于它们是否准确。学生每张图像获得一滴，因此两个类在放下时都变得不可拖动：

function handleCardDrop( event, ui ) {
 slotNumber = $(this).data( 'number' );
 cardNumber = ui.draggable.data( 'number' );
 ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
   if (slotNumber == cardNumber) {
    ui.draggable.removeClass('wrong');
    ui.draggable.addClass('right');
    $('.right').draggable('disable');
    correctCards++;
   } else {
    ui.draggable.addClass('wrong');
    $('.wrong').draggable('disable');
   };
}

学生可以随时通过按钮检查他们的作业。单击此按钮时，我运行一个检查器函数，如下所示：

function checker() {
 if ( correctCards == howManyItems ) {
 $('#successMessage').show();
 $('#successMessage').animate( {
  left: '380px',
  top: '200px',
  width: '400px',
  height: '100px',
  opacity: 1
 } );
} else {            
 alert("Nice try, but not quite. You have " + correctCards + " correct.");
 $(".picpos").data("left", $(".picpos").position().left).data("top", $(".picpos").position().top);
 $(".wrong").animate({
        "left": $(".picpos").data("left"),
        "top": $(".picpos").data("top")
 });
};
 $('#pic').removeClass('wrong').addClass('redo');
 $('.redo').draggable({disabled: true});
 $('.redo').draggable('enable');
};

分类为.wrong的答案将恢复到其起始位置，然后将其类更改为.redo。

我遇到的问题是draggable似乎实际上并不适用于.redo，我已经尝试了几种不同的方法来使其适用。因此，当图像现在以动画形式返回到其起始位置时，无法拖动它们。

我还要补充一点，当图像返回时，有必要将类从.wrong更改为。如果他们保留该类，则只要学生在第二次尝试时出错，handleCardDrop函数就会使之前出错的任何图像都无法拖动，因为它会禁用.wrong类图像。

我似乎已经想通了。

我没有向#pic添加一个新类，而是简单地在.wrong上启动了draggable，调用它，然后从现在可重新拖动的图像中删除类.wrong，因此：

    $('.wrong').draggable({disabled: true});
    $('.wrong').draggable('enable');
    $('.wrong').removeClass('wrong');
相关文章：