get id of dropped div using dragula javascript

问题

I am trying to update a c3.js chart using drag and drops with dragula.js, but I don't know how to get the id of the div that is dragged into a new container. My html is something like this:

<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>

and I'm using dragula.js to drag and drop:

dragula([collapse1,collapse2]);

I am really new to jquery, but following this question, to access the id of the <div> dropped into collapse2 in I was trying to do something like this:

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

But no results. Any help would be really appreciated

回答1:

Dragula has three Elements One is Source Div, Target Div and Its associated Element. Following Method Works For Me as Charm except i am Not using get() method which has version issue. You Can Try Both. Dragula gives you the id of dropped div, Source Div, Target Div.

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

回答2:

Can't answer the question directly because I am not familiar with dragula. However, I have used jqueryUI drag drop extensively and its a really good tool. You might want to give that framework a try.

Since you asked for an example, I dug into some of my old code. You might want to go look through the jqueryUI draggable and droppable tutorials to give you some background before looking at this. I have included parts of a function. I put little dots to show you where code has been left out. I have put <<< next the key lines for you. Notice how I use closure to make references available across different parts. Closure is soooo awesome. I abuse the death out of it, so learn how to use it if you can.

Note that once I got my drag object, that is what you are asking for. Notice how I reference the variable to my function later when I register the draggable.

Btw, notice there is also a stop drag function referenced which I don't show the definition of. If you move the declaration of the dragObject outside of startDrag then you can also see it from stopDrag since the definition of the function is "enclosed" in the outside register function.

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

    ...

来源：https://stackoverflow.com/questions/39009643/get-id-of-dropped-div-using-dragula-javascript

标签

javascript

jquery

html

dragula