CODEWITHSUNDEEP
jquerydrag-and-drop
Karl Adler
Karl Adler

Reputation: 16836

Drag n Drop: How to detect element which into dropped - jquery, threedupmedia

I'm using the jquery Drag'n'Drop Plugin from threedupmedia. I allready managed the drag n drop into a dropzone. Now I have many of those dropzones and I want to detect in which dropzone the element was dropped into. But I can't find anything how to do this.

You can see the use case and simplified mark-up in the fiddle

jQuery(function ($) {

    $('.dnd-btn')
        .drag("start", function (ev, dd) {
    })
        .drag("end", function (ev, dd) {
        if (!$(this).hasClass('dropped')) {
            $(this).css({
                top: dd.originalY,
                left: dd.originalX
            });
        } else {
            $(this).removeClass('dropped');
        }
    })
        .drag(function (ev, dd) {
        $(this).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    }, {
        relative: true,
        drop: '.dnd-drop'
    });

    $('.dnd-drop').drop(function (ev, dd) {
        console.log(ev);
        // fade out element and show it again at origin position:
        $(dd.drag).addClass('dropped').fadeOut('slow',

        function () {
            $(dd.drag).css({
                top: dd.originalY,
                left: dd.originalX
            }).fadeIn();
            $('.balance').parent().removeClass('highlight');
        });

        // update account value local
        var price =  parseFloat(  $(dd.drag).data('price') ).toFixed(2);
        console.log(price);
        balance = $('.balance');
        var accountVal = parseFloat(balance.text());
        accountVal = accountVal - price;
        balance.text(accountVal.toFixed(2));

    });
});

Upvotes: 0

Views: 142

Answers (1)

Karl Adler
Karl Adler

Reputation: 16836

well I figured it out using good old try and error algorithm. It's as easy as baking cake: just use $(dd.drop) in the drop event to get the current element which in was dropped. 

$('.dnd-drop').drop(function(ev, dd){
       $(dd.drop).text("I'm the one you searched for!");
});

Upvotes: 0

Related Questions