Question

我正在尝试使用dragula.js拖放来更新c3.js图表，但我不知道如何获取拖入新容器的div的id。我的HTML是这样的：

<div id="collapse1" class="panel-collapse collapse">
    <div id="color1" class="form-inline">1</div>
    <div id="color2" class="form-inline">2</div>
    <div id="color3" class="form-inline">3</div>
</div>
<div id="collapse2" class="panel-collapse collapse">

</div>

我正在使用dragula.js进行拖放：

dragula([collapse1,collapse2]);

我对jquery很陌生，但是在this question后，要访问<div>的{{1}}的ID，我试图做这样的事情：

collapse2

但没有结果。任何帮助都会非常感激

Answer 1

无法直接回答这个问题，因为我对dragula不熟悉。但是，我已经广泛使用了jqueryUI拖放，这是一个非常好的工具。您可能想尝试使用该框架。

因为你问了一个例子，我挖了一些旧的代码。在查看此内容之前，您可能需要查看jqueryUI draggable和droppable教程以获得一些背景知识。我已经包含了一部分功能。我用小点来向你展示代码被遗漏的地方。我把＆lt;＆lt;＆lt;接下来是你的关键线。请注意我如何使用闭包在不同部分之间提供引用。关闭真是太棒了。我滥用死亡，所以如果可以，请学习如何使用它。

请注意，一旦我得到了拖动对象，这就是你要求的。注意我在注册draggable后如何将变量引用到我的函数。

顺便说一下，注意还有一个引用的停止拖动功能，我没有显示它的定义。如果你将dragObject的声明移到startDrag之外，那么你也可以从stopDrag中看到它，因为函数的定义是“封闭”在外部寄存器函数中。

function tapeChart_registerDraggables(parentObject,scope) {

    if ((parentObject==null)||(parentObject==undefined)) {
        parentObject=$jq(document.body);
    }

    var availablesShow = false;
    var savingToServer = false;
    var dragClone = null;

    var startDrag = function(event, ui) {

        tapeChartDraggingReservation = true;

        var dragObject = event.target;  <<<<<<

       if (dragObject.getAttribute("unassigned")=="true") {
            var is_chrome = window.chrome;
            var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
            if (!is_chrome && !is_safari) {
                $(ui.helper).css("margin-left", event.clientX - $(dragObject).offset().left);
                $(ui.helper).css("margin-top", event.clientY - $(dragObject).offset().top);               
            }
        }

        ...

        // assigned rooms
    if (scope!="UNBLOCKED") {
        // register items in the grid
        $(parentObject).find( ".NODRAGHELPER" ).draggable(
            {   
                snap : "true",                
                revert : "invalid",
                start: startDrag,  <<<<
                stop: stopDrag
            }
        )
        .click(function(){
            if ( $(this).is('.NODRAGHELPER-dragging') ) {
                return;
            }

            // seems that the user can drop and click fast
            // prevent this
            if (!savingToServer) {
                tapeChart_getReservation(this);
            }
            return false;
        });
    }

    ...

Answer 2

Dragula有三个元素一个是Source Div，Target Div及其相关元素。以下方法适用于我作为魅力除了我不使用具有版本问题的get（）方法。你可以试试两者。 Dragula为您提供了丢弃的div，Source Div，Target Div的ID。

   const dragula = Dragula(['', '']);
      dragula.on('drop', (el, target, source, sibling) => {
        const elementId = $(el).attr("id");
        const targetID = $(target).attr("id");
        const sourceId = $(source).attr("id");
}

使用dragula javascript获取删除div的id

2 个答案: