通过将列表项拖到左侧来显示一个按钮

Question

我正在尝试使用引导程序创建一个列表，并且对于每个项目，我希望在按顺序将它们向左拖动时显示列表项后面的按钮（如在智能手机应用程序中）。

像这样：

所以我用jQuery ui

做了这个JavaScript

$(function() {
        $( "#historique1" ).draggable({
            axis: 'x',
            containment: [-110, 0, 0, 0],
            revert: function() {
            //determine the start/end positions
            var end = $(this).position().right;
            var start = $(this).data('start');
            //subtract end and start to get the (absolute) distance
            var distance = Math.abs(end - start);
            var width = $(this).width();
            //if the distance is more than 80% of the width don't revert
            if(distance > (width * .8))
            {
                return false;
            }
            //else revert
            return true;
            },
            start: function(){
                //get the start position
                var start = $(this).position().right;
                //store the start position on this element
                $(this).data('start', start);
            }
        });
    });

当我向左拖动但小于0.8 *宽度时，恢复为真，我的div返回到原点位置。

但是如果拖动它的距离高于0.8 *宽度，我不知道如何将div移动到最左边位置。

我想将div（一个列表项）拖到左侧。如果拖动的距离小于一半，则div返回原点。如果距离大于一半，则div向左移动并停在

位置

还有其他办法吗？ （就像一个可拖动的侧边栏）