0

要素を互いに「交換」する2つのjquery-isotopeインスタンスがあります。これは機能しますが、何らかの理由で jquery-isotopes の間にスペースができます。同位体が正しく配置されるように、これらの空白を削除する方法を誰かが知っていますか? jsfiddle を作成しました: http://jsfiddle.net/XEYds/

乾杯！

var $container = $('#product-masonry');
var $trash = $('#trash-masonry');

$container.isotope({
    itemSelector: '.item',
});
$trash.isotope({
    itemSelector: '.item',
});

// remove item if clicked

  $container.delegate( '.remove', 'click', function(){
  var remove_id = $(this).data('item');
  $trash.isotope( 'insert',$('#' + remove_id) );
  });
  $trash.delegate( '.remove', 'click', function(){
  var remove_id = $(this).data('item');
  $container.isotope( 'insert',$('#' + remove_id) );
  });
4

1 に答える 1

0

jquery isotope プラグインで 2 つの新しい関数を作成しました。

throwaway : function( $content, callback ) {
  // remove elements immediately from Isotope instance
  this.$allAtoms = this.$allAtoms.not( $content );
  this.$filteredAtoms = this.$filteredAtoms.not( $content );
  // remove() as a callback, for after transition / animation
  var instance = this;
  var removeContent = function() {
    $('#trash-masonry').append( $content ).isotope( 'appended', $content );
    setTimeout(function(){ $('#trash-masonry').isotope() }, 400);
    setTimeout(function(){ $('#product-masonry').isotope() }, 400);
  };

  if ( $content.filter( ':not(.' + this.options.hiddenClass + ')' ).length ) {
    // if any non-hidden content needs to be removed
    this.styleQueue.push({ $el: $content, style: this.options.hiddenStyle });
    this._sort();
    this.reLayout( removeContent );
  } else {
    // remove it now
    removeContent();
  }

},    

putback : function( $content, callback ) {
  // remove elements immediately from Isotope instance
  this.$allAtoms = this.$allAtoms.not( $content );
  this.$filteredAtoms = this.$filteredAtoms.not( $content );
  // remove() as a callback, for after transition / animation
  var instance = this;
  var removeContent = function() {
    $('#product-masonry').append( $content ).isotope( 'appended', $content );
    setTimeout(function(){ $('#trash-masonry').isotope() }, 400);
    setTimeout(function(){ $('#product-masonry').isotope() }, 400);
  };

  if ( $content.filter( ':not(.' + this.options.hiddenClass + ')' ).length ) {
    // if any non-hidden content needs to be removed
    this.styleQueue.push({ $el: $content, style: this.options.hiddenStyle });
    this._sort();
    this.reLayout( removeContent );
  } else {
    // remove it now
    removeContent();
  }

},

と

$container.delegate( '.remove', 'click', function(){
    var remove_id = $(this).data('item');
    $container.isotope( 'throwaway',$('#' + remove_id) );
});
$trash.delegate( '.remove', 'click', function(){
    var remove_id = $(this).data('item');
    $trash.isotope( 'putback',$('#' + remove_id) );
});

魅力のように機能します:)

于 2013-01-10T22:49:01.797 に答える