javascript - 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);
}

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

请问有人可以帮我吗？我完全迷失了......

Answer 1

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

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');
};

};