Question

解决方案：我改变了 $（本）.removeClass（ 'inactivetile'）addClass（ 'incorrecttile'）。
至
。ui.draggable.removeClass（ 'inactivetile'）addClass（ 'incorrecttile'）;
DOI

我在这里尝试了一些不同的东西，但我是空的。
基本上我想要一个droppable来检查它上面的id是什么，并相应地改变css。例如，假设我有两个可拖动的：#drag1和#drag2以及一个可放置：#drop1。
当＃drag1被删除#drop1时，css类从.droptile更改为.correcttile - 如果#drag2被删除，则css类从.droptile更改为.incorrecttile.听起来很简单，但我似乎无法超越这个：

  $('#drop1').droppable({
  hoverClass: 'hovered'});

  $('#drop1').on('drop', function (event, ui) {

  var itemid = $(ui.draggable).attr('id'); //tried this and then called it in the else statement with no luck

      if ($(ui.draggable).attr('id') == 'drop1') {
          ui.draggable.position({ of: $(this) });
          $('#drop1').removeClass('droptile').addClass('correcttile')
      }
      else {
          ui.draggable.position({ of: $(this) });
          $(this).removeClass('droptile').addClass('incorrecttile');
      }

  });

提前致谢！

Answer 1

在if条件下，您使用drop1代替drag1

$('#drop1').on('drop', function (event, ui) {

    var dragId = $(ui.draggable).attr('id');

    ui.draggable.position({
        of: $(this)
    });

    $(this).removeClass('droptile').addClass(dragId == 'drag1' ? 'correcttile' : incorrecttile)
});

演示：Fiddle

Answer 2

解决方案：我改变了 $（本）.removeClass（ 'inactivetile'）addClass（ 'incorrecttile'）。
到。ui.draggable.removeClass（ 'inactivetile'）addClass（ 'incorrecttile'）;
DOI

Answer 3

你需要做这样的事情：

$(function() {
    $( "#draggable1" ).draggable();
    $( "#draggable2" ).draggable();

    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
          if( ui.draggable.attr('id') == 'draggable1' ){
              $( this ).addClass( "ui-state-highlight" ).find( "p" ).html("Dropped!" );
          }
      }
    });
  });

https://jsfiddle.net/ygk4k7gc/完整示例

使用droppable上的if / else更改CSS类

3 个答案: