redips.drag在删除行并发送到服务器时获取行id

Question

我正在构建一个django站点，并在我的一个页面中实现了redips.drag库，以允许拖动表行。我想在我的代码中实现一个非常简单的功能--添加一个侦听器，这样当行被删除时，它就会将行数据发送到服务器。jQuery--大概是这样的：

$(function() {
    $(someDomElement).on('DropEvent', function() {
           // send data to server
    };

});

问题是，redips.drag不是一个jQuery插件，而是一个javascript插件，所以我的知识有点(不止一点)缺乏。我可能可以找到一些其他的库，但它的性能真的很好，我更喜欢了解如何使用它，而不是寻找不同的库。

我大概可以自己处理“发送数据到服务器”的部分，我根本不能理解的是如何“捕捉”drop事件，我该听dom的哪一部分？我尝试将monitorEvents添加到不同的选择器，但完全失败了。

我还尝试操作script.js文件(初始化行处理的文件)，但也失败了。下面是我使用的示例( redips包中的示例20 )：

"use strict";

// define redips object container
var redips = {};

redips.init = function () {
    // reference to the REDIPS.drag library and message line
    var rd = REDIPS.drag,
        msg = document.getElementById('msg');
    // initialization
    rd.init();
    // 
    // ... more irrelevent code ...
    // 
    // row event handlers
    //
    // row clicked (display message and set hover color for "row" mode)
    rd.event.rowClicked = function () {
        msg.innerHTML = 'Clicked';
    };
    // row row_dropped
    rd.event.rowDropped = function () {
        msg.innerHTML = 'Dropped';
    };

    // and so on...
};


// function sets drop_option parameter defined at the top
redips.setRowMode = function (radioButton) {
    REDIPS.drag.rowDropMode = radioButton.value;
};


// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redips.init, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redips.init);
}

现在，我尝试向rd.event.rowDropped函数(就在msg.innerHTML行的上方)添加一个console.log('hello')，但这不起作用，我删除了该行，并且日志中没有显示任何内容。在init函数之外执行console.log是可行的，因此我知道脚本可以将内容传递到控制台。

有谁能帮帮我吗？我完全不知所措...

Answer 1

我知道现在回答你的问题可能有点晚了，但我找到了答案。您需要使用丢弃的事件和属性rd.obj (REDIPS.drag.obj)来获取id，并将其与getAttribute('id')之类的简单javascript一起使用。

redips.init = function () {
// reference to the REDIPS.drag library and message line
var rd = REDIPS.drag,
    msg = document.getElementById('msg');
// initialization
rd.init();

// row clicked (display message and set hover color for "row" mode)
rd.event.clicked = function () {
    msg.innerHTML = 'Clicked' + rd.obj.getAttribute('id');
};
// row row_dropped
rd.event.dropped = function () {
    msg.innerHTML = 'Dropped' + rd.obj.getAttribute('id');
};

}；