jQuery-dragarrange中的jQuery Dragend事件

问题描述

我在这个图书馆中使用： https://github.com/vishalok12/jquery-dragarrange

完成项目拖动后，我需要运行一个函数。

<div id="elements-container">
  <div class="draggable-element d-1">Drag 1</div>
  <div class="draggable-element d-2">Drag 2</div>
  <div class="draggable-element d-3">Drag 3</div>
  <div class="draggable-element d-4">Drag 4</div>
</div>


$(function () {
    $('.draggable-element').arrangeable();
});


function dragEnd(){
    alert('Drag End');
}

解决方法

在代码中，选项中有一个dragEndEvent属性。

尝试一下：

$(function () {
    $('.draggable-element').arrangeable({
        dragEndEvent: function(){
             alert('Drag End');
        }
    });
});

那是对您正在使用的库的代码进行的快速扫描，未经测试，但是请告诉我它是否有效！

更新-刚刚在GitHub上的“可选参数”下看到了这一部分。我认为，dragEndEvent实际上不是回调，而是命名事件。换句话说，它在拖动端按名称触发此事件。默认值为drag.end.arrangeable。

尝试以下方法：

$(function () {
    $('.draggable-element').arrangeable({
        dragEndEvent: "dragend"
    });
    $('.draggable-element').on("dragend",function(){
        alert("Drag End");
    });
});

或仅使用默认值，请使用：

$(function () {
    $('.draggable-element').arrangeable();
    $('.draggable-element').on("drag.end.arrangeable",function(){
        alert("Drag End");
    });
});

编辑两个数字！

对不起，这是发布答案而没有机会测试代码时发生的事情！

drag.end.arrangeable事件是在父级元素而不是可拖动元素上触发的！（我不确定开发者为什么这样做吗？）

$(dragElement).parent().trigger(dragEndEvent,[$(dragElement)]); <<< see - .parent()

所以代码是：

$（function（）{ $（'。draggable-element'）。arrangeable（）; $（'＃elements-container'）。on（“ drag.end.arrangeable”，function（）{ alert（“拖动结束”）; }）; }）;

您还应该能够将第二部分写为

$('.draggable-element').parent().on("drag.end.arrangeable",function(){
    alert("Drag End");
});

但是我不确定这是否会创建多个绑定。由于某种原因，我今天在互联网上遇到了很大的麻烦，而测试却完全失败了。我做了这个JsFiddle测试：https://jsfiddle.net/jhartnoll/0ys9gbt6/，但是由于互联网的原因，它无法正确加载我的终端，但是请尝试！

drag jquery