javascript - 单击表格中的图像

Question

目前，当鼠标拖到一个单元格上时，下面的代码将突出显示允许的单元格以将所选部分拖到。

我需要修改代码以包括点击。例如，当鼠标拖过一个单元格时，允许的单元格会突出显示。单击同一单元格时，允许的单元格将保持突出显示，直到再次单击原始单元格或单击突出显示的位置之一，图像将出现的位置。我怎样才能做到这一点？

谢谢。

当前小提琴。

HTML：

<table border="1" id="tbl">
  <tr>
    <td ></td>
    <td  bgcolor=#000000 ></td>
    <td class="items  p1 p3"><img src="http://icons.iconarchive.com/icons/deleket/soft-  scraps/32/Button-Blank-Red-icon.png"/></td>
  </tr>
  <tr>
    <td bgcolor=#000000 ></td>
    <td class="items  p1"></td>
    <td class="items p3" bgcolor=#000000 ></td>
  </tr>
  <tr>
    <td class="piece" id="p1" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png"></td>
    <td bgcolor=#000000 ></td>
    <td class="piece" id="p3" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" ></td>
  </tr>
</table>

jQuery：

$('img').draggable({  });
$('#tbl td').droppable({
  hoverClass: 'over',
  drop: function(event, ui) {
    if ($(this).css("background-color")==='rgb(255, 255, 0)') {
      $(this).children('img').remove();
      var cell = ui.draggable.appendTo($(this)).css({
        'left': '0',
        'top': '0'
      });
      $('img').draggable('disable');
    } else {
      ui.draggable.draggable('option','revert',true);
    }
    $("td").each(function() {
      var id = $(this).attr("id");
      $("."+id).css("background", "");
    });
  }
});
$(".piece").mouseover(function() {
  id = $(this).attr('id');
  $("."+id).css("background", "yellow");
}).mouseleave(function() {
  id = $(this).attr('id');
  $("."+id).css("background", "");
});

Answer 1

我认为这增加了您正在寻找的功能：

jsFiddle

JS

var imgs = $('img'); 

imgs.draggable({  });

$('#tbl td').droppable({
    hoverClass: 'over',
    drop: function(event, ui) {
        var cell = $(this); 
        var img = ui.draggable;

        if (cell.hasClass("yellow")) {      
          cell.children('img').remove();
          img.appendTo(cell).css({
            'left': '0',
            'top': '0'
          });
          img.draggable('disable');
        } else {                     
          img.draggable('option','revert',true);      
        }

        $('.yellow').removeClass('yellow');  

        setUpHover(); 
    }
});

imgs.click(function(){
  //the image we just clicked on
  var img = $(this); 
  //The cells we can move our image to.
  var cells = $("." + img.parent().attr('id'));

  //disable dragging of other images while this one is in focus
  imgs.not(img).draggable('disable');
  //disable the hover event so that we don't lose our highlighted cells
  imgs.unbind('hover'); 
  //add a dynamic click event to the cells we're allowed to click on. 
  cells.click(function(){
    //re-enable dragging for all images
    imgs.draggable('enable'); 
    //remove the dynamic click event and remove the yellow background
    cells.unbind('click').removeClass('yellow'); 
    //add the image to the cell. 
    $(this).html(img); 
    //re-bind the hover event.
    setUpHover(); 
  }); 
}); 

function setUpHover(){
  imgs.unbind('hover').hover(function() {
    var id = $(this).parent().attr('id');
    $("."+id).addClass("yellow");
  }, function() {
    var id = $(this).parent().attr('id');
    $("."+id).removeClass("yellow");       
  });
} 
setUpHover(); 

CSS

#tbl td { width:32px; height:32px;}
.over { background-color: red; }
.yellow {
  background-color:yellow !important;     
}