jquery-dragarrange中的Jquery拖动事件

Question

我在使用这个库：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');
}

Answer 1

看一下代码，在options中有一个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事件是在父元素上触发的，而不是draggables！(我不确定开发人员为什么要这样做？)

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

所以代码是：

$( function () { $('.draggable-element').arrangeable()；$('#elements-container').on("drag.end.arrangeable"，function(){alert(“.draggable”)；})；})；

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

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

但我不确定这是否会创建多个绑定。由于某些原因，我今天在互联网上遇到了很大的问题，测试很简单就失败了。我制作了这个JsFiddle来测试：https://jsfiddle.net/jhartnoll/0ys9gbt6/，但由于我的互联网原因，它无法正确加载我的端，但请尝试一下！