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

Question

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

我希望能够仅单击移动图标（任何部分顶部栏中右侧的第三个图标）并在其视口中启动该步骤的可排序拖动。

父 div 创建为：

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

根据需要添加每个步骤。

我知道编写如下代码，但这允许单击 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() 的参考资料，但我在这里看不到如何实现它。

我在 JQuery 上还是个新手，所以我希望能提供尽可能详细的信息。感谢任何能帮助我的人。

已编辑 我确实让它部分起作用了。我能够基本上将上述在文档级别工作的代码放入图像的 onmousedown 事件中。但是之后我一直无法将其关闭。我尝试使用 onmouseup 事件，但似乎从未调用过，所以我假设排序 drag/dropping 操作会覆盖鼠标弹起事件？

是否有关于 sortable 的结束动作事件？我需要以某种方式知道拖动何时完成，以便可以重新调整步数。

已编辑 好吧，这让我开始寻找其他解决方案并关闭：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 中的拖动，但我无法通过单击该图标再次启用它。那我做错了什么？

Answer 1

您可以使用 'handle'

像这样：

$("#add_steps").sortable({
    cursor: 'move',
    opacity: 0.8,
    handle: ".icon" // your icon
    // other stuff you might need
});

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

Starting a JQuery Div Drag by clicking on an image

jquery

jquery-ui

jquery-ui-sortable