1

我正在尝试使用 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 真的很陌生，但是在这个问题<div>之后，为了访问放入的 id，collapse2我试图做这样的事情：

alert($("#collapse1.collapse2 div:first").attr("id"));

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

4

2 回答 2

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");
}
于 2016-10-15T12:05:51.880 回答
0

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

既然你问了一个例子，我挖掘了我的一些旧代码。在查看此内容之前，您可能需要查看 jqueryUI 可拖动和可放置教程以提供一些背景知识。我已经包含了一个函数的一部分。我用小点向你展示了代码被遗漏的地方。我已经为你放了 <<< 接下来的关键行。请注意我如何使用闭包来使不同部分的引用可用。关闭太棒了。我滥用它的死亡，所以如果可以的话，学习如何使用它。

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

顺便说一句，请注意还引用了一个停止拖动函数，我没有显示它的定义。如果您将 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;
        });
    }

    ...
于 2016-08-18T03:45:05.837 回答