Contour des cellules de la table sélectionnable de l'interface utilisateur Jquery

Question

Ok, j'utilise donc Jquery UI Selectable pour mettre en surbrillance certaines cellules d'une table. Je voudrais être en mesure d'ajouter une bordure autour des cellules en surbrillance en utilisant comme une bordure 2px. De cette façon, chaque fois que vous mettez une section en surbrillance, vous pouvez indiquer la séparation entre chaque section mise en surbrillance. J'espère également pouvoir atteindre ce résultat avec des sections qui se chevauchent.

J'ai fait pas mal de lecture et je n'ai pas vraiment vu quelqu'un essayer de le faire pour le moment. Je me demande donc si quelqu'un pourrait me pointer dans la bonne direction sur la façon d'obtenir cet effet.

Voici un fiddle de mon exemple et un code ci-dessous.

var shadeColor = $(".color-pallet > .active").css("background-color"); 

applySelectable = function() { 
    $(".block-tools > .shade-btn").click(function() { 
     var $this = $(this);  

     if (!$this.hasClass("active")) { 
      $this.siblings().removeClass("active"); 
      $this.addClass("active"); 
     } 
    }); 

    $(".color-pallet > span").click(function() { 
     var $this = $(this); 

     if (!$this.hasClass("active")) { 
      $this.siblings().removeClass("active"); 
      $this.addClass("active"); 

      shadeColor = $(this).css("background-color"); 
     } 
    }); 

    // keep selected shade color selected after new question 
    if (shadeColor !== $(".color-pallet > .active")) { 
     $(".color-pallet > span").filter(function(){ 
      var color = $(this).css("background-color"); 
      if (color === shadeColor) { 
       $(this).click();  
      }; 
     }); 
    } 

    $(".blocks").bind("mousedown", function(e) { 
     e.metaKey = true; 
    }).selectable({ 
     filter: "td", 
     selecting: function (event, ui) { 
      if ($('.block-shade').hasClass("active")) { 
       $(ui.selecting).addClass('marked').css("background-color", shadeColor); 
      } else { 
       $(ui.selecting).removeClass('marked').css("background-color", ""); 
      } 
      userAns = $('.marked').length+""; 
     } 
    }); 
}; 

applySelectable(); 

Merci d'avance pour votre temps.

EDIT: Pour les points bonus, quelqu'un peut-il me dire quand je fais glisser une sélection, pourquoi la hauteur des conteneurs augmente-t-elle et crée-t-elle une barre de défilement? Cela m'a sérieusement dérangé pendant un certain temps et j'ai choisi de l'ignorer mais je suppose que pendant que je suis ici peut-être que quelqu'un pourrait l'expliquer aussi?

Answer 1

Huh ... voici une sorte de solution, j'ai ajouté 4 classes CSS, et un code laid ... mais il travaille ...

$(".blocks").bind("mousedown", function(e) { 
      e.metaKey = true; 
     }).selectable({ 
      filter: "td", 
      selecting: function (event, ui) { 
       if ($('.block-shade').hasClass("active")) { 
        $(ui.selecting).addClass('marked').css("background-color", shadeColor); 
        $(ui.selecting).addClass('top'); 
        $(ui.selecting).addClass('left'); 
        $(ui.selecting).addClass('bottom'); 
        $(ui.selecting).addClass('right'); 
        if($(ui.selecting).prev().hasClass('marked')) { 
         $(ui.selecting).removeClass('left'); 
         $(ui.selecting).prev().removeClass('right'); 
         } 
         if($(ui.selecting).next().hasClass('marked')) { 
         $(ui.selecting).removeClass('right'); 
         $(ui.selecting).next().removeClass('left'); 
         } 

        top_elem=$(ui.selecting).parent().prev('tr').find('td'); 
        // console.log(top_elem); 


         $(top_elem).each(function(i) { 
          if($(this).hasClass('marked')) { 
          if($(this).offset().left==$(ui.selecting).offset().left) 
          { 
           $(this).removeClass('bottom'); 
         $(ui.selecting).removeClass('top'); 
          } 

        } 
         }); 

        bottom_elem=$(ui.selecting).parent().next('tr').find('td'); 


         $(bottom_elem).each(function(i) { 
          if($(this).hasClass('marked')) { 
          if($(this).offset().left==$(ui.selecting).offset().left) 
          { 
           $(this).removeClass('top'); 
         $(ui.selecting).removeClass('bottom'); 
          } 
          } 
        }); 



       } else { 
        $(ui.selecting).removeClass('marked').css("background-color", ""); 
        $(ui.selecting).removeClass('top'); 
        $(ui.selecting).removeClass('left'); 
        $(ui.selecting).removeClass('bottom'); 
        $(ui.selecting).removeClass('right'); 
       } 
       userAns = $('.marked').length+""; 
      } 
     }); 
    }; 

    applySelectable(); 
}); 

DEMO: http://jsfiddle.net/wh2ehzo3/10/

Cependant, qui se chevauchent est vraiment, vraiment difficile si vous voulez garder les frontières sur les parties qui se chevauchent .. ... essai (frontière juste extérieur des deux formes est sauvé, je l'espère, vous verrez ce que je veux dire)

Idée : vérifier frères et sœurs -> supprimer classe s en conséquence, s'il y a un élément .marké, vérifiez les lignes de haut en bas -> faites la même chose ...