如何捕获YUI3可排序拖动事件？

Question

拖放式排序效果很好，但我想知道当有人拖动时如何捕捉。

我尝试了这个，但没有任何警报触发：

YUI().use('sortable', function(Y) {
var sortable1 = new Y.Sortable({
    container: '#demo1',
    nodes: 'li',
    on: {
        nodesChange: function() {
            alert('nodes');
        }
    },
    after: {
        containerChange: function() {
            alert('container');
        }
    },
    after: {
        moveTypeChange: function() {
            alert('moveType');
        }
    }
});
});

以上代码根本不起作用。

在下面的代码中，我现在有一个click事件可以使用，但不是copy事件。

YUI().use('event', 'node', function (Y) {
    var clickedNode = Y.one('#save-order-quicklink');

    var draggedNodes = Y.all('.results-row');
    if (draggedNodes) {
        draggedNodes.each( function(node) {
            node.on('click', function(eventFacade) {
                alert('click');
            });
            node.after('copy', function(eventFacade) {
                alert('copy');
            });
        });
    }
});

copy事件的文档说明：

  

复制
  复制（事件）
  已移动可排序节点。

Answer 1

如何监听YUI3拖动事件：

要在YUI3 Sortable被拖动时执行回调，您可以收听Sortable的{​​{3}}事件：

sortable.on('moved', function(event) {
    // your code here...
});

或者，您也可以使用DragDropMgr收听所有drag事件，如下所示：

Y.DD.DDM.on('drag:drag', function(event) {
    // your code here...
});

有关moved的更多信息，请查看Drag and Drop User Guide。

---

解释您的其他代码不起作用的原因：

代码块1：

您的第一个代码阻止触发事件的原因是因为他们正在侦听Drag and Drop events，nodes和container 属性是改变。例如，像sortable1.set('nodes', newNodes);这样的代码会触发nodesChange事件。

有关详细信息，请参阅YUI3 moveType。

代码块2：

您的copy事件监听器可能不会在您的第二个代码块中触发，因为您没有执行copy，但我无法确定这一点。< / p>