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事件，但似乎从未调用过，所以我假设排序拖放操作会覆盖鼠标按下事件？

无论如何在可排序上获得结束动作事件？我需要知道什么时候拖动完成，所以步骤编号可以重新调整。

被修改 好吧，这让我去寻找其他决议，并关闭：jQuery UI Sortable stop event after drag and drop

我为我的故事提出了这个问题：

    //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

您可以使用＆＃39;句柄＆＃39;

像这样：

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

通过单击图像启动JQuery Div Drag

1 个答案: