通过单击图像启动JQuery Div拖动

我有一个可以有多个div元素的表单,如下所示。

我希望能够只单击移动图标(任何部分顶部栏中从右起的第三个图标),并在其视口中开始该步骤的可排序拖动。

父div创建为:

<div id="add_steps" class='wrapper">
</div>

其中每一步骤根据需要添加到其中。

    //Reordering the Steps
    $(document).ready(function () {
        $("#add_steps").sortable({
            cursor: 'move',
            opacity: 0.8,
            helper: function (e, div) {
                var $originals = div.parent();
                var $helper = div.clone();

                $helper.parent().each(function (index) {
                    // Set helper cell sizes to match the original sizes
                    $(this).width($originals.eq(index).width());
                });
                return $helper;
            }
        });
        $("#add_steps").disableSelection();
    });

我已经看到一些关于使用.trigger()的引用,但我不知道如何在这里实现它。

编辑 我确实让这部分工作。我基本上能够将以上在文档级别工作的代码放入图像的onmousedown事件中。但后来我没能把它关掉。我尝试使用onmouseup事件,但似乎从未调用过,所以我假设排序拖放操作会覆盖鼠标向上事件?

有没有办法在可排序表上获取结束操作事件?我需要知道拖动何时完成,以便重新调整步数。

编辑 好吧,这让我开始寻找其他解决方案,并接近: jQuery UI Sortable stop event after drag and drop

我为我的onmousedown活动想出了这个:

    //Function for Moving a Step Containing Exceptions
    var moveExceptionStep = function (divid, deleteFieldId) {
        $("#add_steps").sortable({
            cursor: 'move',
            opacity: 0.8,
            helper: function (e, div) {
                var $originals = div.parent();
                var $helper = div.clone();

                $helper.parent().each(function (index) {
                    // Set helper cell sizes to match the original sizes
                    $(this).width($originals.eq(index).width());
                });
                return $helper;
            },
            stop: function (e, div) {
                $("#add_steps").sortable("disable");
                $("#add_steps").enableSelection();
            }
        });
        $("#add_steps").disableSelection();
    }

这确实关闭了整个div内的拖动,但我无法通过单击图标再次启用它。我做错了什么?