3

現在、マウスがセル上にドラッグされると、以下のコードは、選択した部分をドラッグできるセルを強調表示します。

クリックも含めるようにコードを変更する必要があります。たとえば、マウスをセルの上にドラッグすると、許容されるセルが強調表示されます。同じセルをクリックすると、元のセルが再度クリックされるか、強調表示された場所の 1 つが画像が表示される場所をクリックされるまで、許可されたセルが強調表示されたままになります。これどうやってするの？

ありがとう。

現在のフィドル。

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", "");
});
4

1 に答える 1

0

これにより、探している機能が追加されると思います。

jsフィドル

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;     
}
于 2013-01-13T21:46:43.697 に答える