JS schwebt negativen Abstand zwischen den Elementen

Question

So habe ich einen Container mit einem Raster von Elementen, und ich möchte Hover zwischen den Zeilen erkennen können. Nicht die einzelnen Gegenstände.

Es ist wichtig, dass die Anzahl der Elemente zu erinnern, in dem Behälter und pro Reihe ändern.

Mein Behälter von Gegenständen sieht derzeit wie diese

<div class="container"> 
    <div class="hover-placeholder"></div> 
    <div class="row"> 
     <!-- Start : Items --> 
      <div class="col-md-3">...</div> 
      <div class="col-md-3">...</div> 
      <div class="col-md-3">...</div> 
      <div class="col-md-3">...</div> 
      ... 
      <div class="col-md-3">...</div> 
     <!-- End : Items --> 
    </div> 
</div> 

Vorzugsweise ich NICHT wollen jedes vierte Element ein Platzhalter Element setzen. Vor allem, weil auf kleineren Bildschirmen die Anzahl der Elemente pro Zeile reduziert wird. Deshalb habe ich in meinem Beispiel oben einen einzelnen Platzhalter außerhalb des Rasters, den ich an die Position zwischen den schwebenden Zeilen verschieben möchte.

Das ist, was ich habe zur Zeit: https://jsfiddle.net/0t8c0h4m/

Sein bei weitem nicht dem Ergebnis bin ich nach, aber ich habe bis zu dem Punkt, wo ich es am Grübeln und stecken zu bleiben.

Jede Hilfe wäre großartig!

---

UPDATE

Das Ziel für diese Funktionalität ist, wenn der Benutzer den negativen Raum schwebt, wird die .hover-placeholder in diese Position übersetzen und sichtbar werden. Wenn Sie darauf klicken, wird ein permanentes Trennzeichen zwischen den Zeilen hinzugefügt.

---

ERFOLG!

Ich habe mein Problem gelöst! Danke Ihnen allen für Ihre Hilfe.

Hier ist meine Lösung: https://jsfiddle.net/0t8c0h4m/9/

Answer 1

Also habe ich eine Lösung gefunden, um Teiler zwischen jeder Zeile mit CSS zu zeigen. Ich habe dieses Thema nur übertrieben.

Ich habe nach jedem Element ein Trennelement hinzugefügt und mit CSS nth-child() kann ich spezifische Teiler an jedem Haltepunkt zeigen.

Ich habe auch die Gruppierungsfunktion hinzugefügt, die ich anstrebte.

Aktualisierte Beispiel: https://jsfiddle.net/0t8c0h4m/9/

Answer 2

Bitte versuchen Sie es mit folgenden Skript

(function($) { 
    'use strict'; 

    // Count items per row 
    function items_per_row($collection) { 
    var count = 0; 

    $collection.each(function() { 
     var $this = $(this); 

     if ($this.prev().length > 0) { 
     if ($this.position().top !== $this.prev().position().top) { 
      return false; 
     } else { 
      count++; 
     } 
     } else { 
     count++; 
     } 
    }); 

    var last = count ? $collection.length % count : 0, 
     rows = count ? Math.round($collection.length/count) : 0; 
    if (last == 0) { 
     last = count; 
    } 

    return { 
     count: count, 
     last: last, 
     rows: rows 
    } 
    }; 

    // On card hover, print current row 
    $('.card').mouseenter(function() { 
    var $card  = $(this); 

    var item_count = items_per_row($('.card')), 
     index  = $(this).index(), 
     current_row = Math.floor(index/item_count.count) + 1; 

     $('pre').text($card.find('.inner').text() + ' is in row '+ current_row); 
    }); 
    $('.card').mouseout(function(){ 
    $('pre').text(''); 

    }); 


})(jQuery); 

Answer 3

Ich denke, dass man Sachen zu viel zu verkomplizieren, wenn Sie nur für den Hover-Effekt zwischen den Elementen und der nichts anderes .

Aktualisiert:

var offsets; 

function get_offsets() { 
    offsets = {}; 
    $('.card').each(function() { 
    var $this = $(this); 
    var card_offset = $this.offset().top; 
    offsets[card_offset] = { 
     ele: $this 
    }; 
    }) 
} 
get_offsets(); 

function get_last_ele(mouse_location) { 
    var element; 
    var previous_key; 
    $.each(offsets, function(key, obj) { 
    if (key > mouse_location && previous_key > 0) { 
     element = offsets[previous_key].ele; 
     return false; 
    } 
    previous_key = key; 
    }) 
    return element; 
} 

$('.container').mousemove(function(e) { 
    if ($(e.target).parents('.row').length == 0) { 
    var last_item_row = get_last_ele(e.pageY) 
    console.log(last_item_row.text()) 
    } 
}); 

JSFiddle: https://jsfiddle.net/0t8c0h4m/6/

ich nur die Bereitstellung der Code, der das letzte Element in der Zeile vor dem Raum, den Sie schweben wird. Von dort können Sie die Zeile anhängen oder den Platzhalter so umstellen, wie Sie es möchten.