Question

我正在尝试使用jQuery ui可排序portlet创建可排序网格。我之所以使用Portlet，是因为我希望将Portlet小部件放置在用户想要的任何位置，例如左侧的Portlet小部件，中间的空间和右侧的Portlet小部件（如果需要）。

我需要能够从左侧调整portlet小部件的大小，使其可以占据“框”的整个宽度，并在此过程中推入其他portlet小部件或可调整大小的小部件重叠的列。

我尝试获取可调整大小的Portlet顶部位置+高度fromTop，然后在该Portlet重叠的地方调用mouseenter事件。调用该函数后，将悬停的portlet的css顶部位置设置为fromTop值。悬停的小部件没有任何反应，我无法弄清楚为什么...

我知道有一些我想完成的插件，例如gridster或gridstack，但是我在这些插件中遇到了许多未修复的错误。

jsfiddle： https://jsfiddle.net/Souleste/8rLtucn3/7/

jQuery：

$( function() {
  $('.portlet').append('<i class="fa fa-arrows-v resize-icon"></i>');

  $( ".column" ).sortable({
    connectWith: ".column",
    handle: ".portlet-inner",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all"
  });
  $(".portlet").resizable({
    grid: [95,95],
    containment: '.box',
    animateEasing: "easeOutBounce",
    start: function(event, ui){
      $('.portlet').css({
        'border': '2px solid #fc8d9e !important',
        'background': 'transparent !important'
      });
    },
    resize: function(event, ui) {
      console.log(ui.element.position());
      var itemPos = ui.element.position();
      var fromTop = parseFloat(itemPos.top) + ui.element.outerHeight();
      console.log(fromTop);

      $('.portlet').not(ui.item).on('mouseenter', function() {
        var ports = $(this).parent().children('.portlet');
        console.log($(this).attr('id'));
        console.log('hovering');

        ports.each(function(e) {
          var self = this;
          var thisPos = $(self).position();
          $(self).css('top', fromTop + '!important');
          thisPos.top( thisPos + fromTop );
        });
      });

    },
    stop: function(event, ui){
      $('.portlet').off('mouseenter');
      $('.portlet').unbind('mouseenter').unbind('mouseleave')
    }
  });
});

HTML：

<div class="box">
  <div class="column">
    <div class="portlet">
      <div id="one" class="portlet-inner"></div>
    </div>
    <div class="portlet">
      <div id="two" class="portlet-inner"></div>
    </div>
  </div>
  <div class="column">
    <div class="portlet">
      <div id="three" class="portlet-inner"></div>
    </div>
  </div>
  <div class="column">
    <div id="four" class="portlet">
      <div class="portlet-inner"></div>
    </div>
    <div id="five" class="portlet">
      <div class="portlet-inner"></div>
    </div>
  </div>
</div>

CSS：

.box {
  width: 600px;
  height: 600px;
  position: relative;
}
.column {
  min-height: 190px;
  width: 190px;
  float: left;
  position: relative;
}
.portlet {
  min-height: 190px !important;
  min-width: 190px !important;
  position: relative;
}
.portlet-inner {
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  position: absolute;
  background: #fc8d9e;
  border-radius: 5px;
}
.portlet-placeholder {
  border: 2px dashed #fc8d9e !important;
  margin: 0 1em 1em 0;
  height: 50px;
}
.ui-icon {
  bottom: 5px;
  right: 5px;
  opacity: 0;
}
.resize-icon {
  color: #555;
  font-size: 20px;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 7px;
  right: 10px;
}
.ui-resizable-resizing {
  border: 2px dashed #fc8d9e !important;
  border-radius: 5px;
}

Answer 1

想出了一种几乎完美的方法。到处都有一些小故障，但大部分时间都能完成工作。类似于AnimatedOpacity( duration: Duration(milliseconds: 300), opacity: opacity, child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: < Widget > [ Text("Hello World"), ], ), ), ),，我可以将小部件或“ portlet”放置在几乎任何我想要的位置（一个在左边，一个在右边，一个在底部），并且我可以调整它们的大小以使其他小部件成为按下。

我所做的是在gridstack.js中添加了大量的空列，然后在将小部件拖到上方时，可以将其放置在这些空列中的任何一个中。我可以在不重叠的情况下调整小部件的大小，因为该列会随之调整大小，从而将其他列推开。

这是更新的小提琴： https://jsfiddle.net/Souleste/8rLtucn3/7/

如何下推Portlet或Portlet列：可排序和可调整大小的jQuery UI

1 个答案: