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元素一次，而不是两次。

如果您仍在遇到问题，请对此进行测试并在小提琴中工作，请告知我可能存在其他问题。

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

1 个答案: