如何在降低元素高度后实现draggable？

Question

我想减少div的高度，并使用jquery-ui-draggable使其可拖动。这就是我在JS中所做的

 $(".sortable").sortable({
      revert: true,
      start : function (){
        $(".qhide").css("height","60px");
        $(".qhide").css("overflow","hidden");
      },
      stop : function(){
        $(".qhide").css("height","");   
        $(".qhide").css("overflow","none");
      }
    });

我的html是这样的：

<div class="sortable">
    <div class="row">
     Some content here
        <div class="qhide">some more content here</div>
    </div>
</div>

问题是，虽然视图中的高度降低了，但拖动的高度是div的原始高度(这意味着我必须将div拖到页面下方很远的位置，才能使它在压缩结构中向下移动)。有什么办法可以改变这一点吗？

Answer 1

尝试此方法

我对这个JSFiddle中的可排序对象做了一些修改，这样您就可以看到和测试您可以做的一些不同的事情。

但是您要查找的具体代码如下：

HTML

start: function () {
    $('.qhide').addClass('collapse');
},
stop: function () {
    $('.qhide').removeClass('collapse');
}

CSS

.collapse {
    height:30px;
    overflow:hidden;
}

此解决方案将更高效，因为浏览器只需在启动和停止时查找.qhide元素一次，而不是两次。

这是测试和工作的小提琴，如果你仍然遇到问题，让我知道可能还有另一个问题。