Drag/Drop dropTargetLeave event doesn't always fire.

[jeffgackMember]

Hello Forum,

I’m trying to use the drag/drop plugin and I have multiple targets (several divs of the same class).
I notice that the dropTargetLeave event only seems to fire on the last instance of the target. Am I allowed to have multiple targets? I notice that both examples in the demo only have one target.

Example:

Drag Me!

..

Target 1

..

Target 2

..
$(“#dragme”).jqxDragDrop({ dropTarget: “.target” });
$(‘#dragme’).bind(‘dropTargetEnter’, function (event) { $(event.args.target).css(‘border’, ‘2px solid #000’); }); //Works just fine.
$(‘#dragme’).bind(‘dropTargetLeave’, function (event) { $(event.args.target).css(‘border’, ‘0px’); }); //Never fires when I leave “Target 1”.

Any help is appreciated,
Thanks,
Jeff

[jeffgackMember]

Sorry, I didn’t realize my tags would be scrubbed. Here’s the example again:
<div id=”dragme”>Drag Me!</div>
..
<div class=”target”>Target 1</div>
..
<div class=”target”>Target 2</div>
..
$(“#dragme”).jqxDragDrop({ dropTarget: “.target” });
$(‘#dragme’).bind(‘dropTargetEnter’, function (event) { $(event.args.target).css(‘border’, ’2px solid #000′); }); //Works just fine.
$(‘#dragme’).bind(‘dropTargetLeave’, function (event) { $(event.args.target).css(‘border’, ’0px’); }); //Never fires when I leave “Target 1″.

[MinkoBlocked]

Hello Jeff,

This issue will be fixed in the next release.
Here is a simple workaround until then:

$(document).ready(function () {
    var target = $('.target'),
        targetHandle = [],
        width = $('#dragme').width(),
        height = $('#dragme').height();
    (function init() {
        var currElement;
        $.each(target, function (idx, el) {
            el = $(el);
            targetHandle.push({
                bounds: { width: el.width(), height: el.height(), left: el.offset().left, top: el.offset().top },
                entered: false,
                el: el
            });
        });
    } ())
    $(document).mousemove(function (event) {
        var offset = $('#dragme').offset(),
            left = offset.left,
            top = offset.top;
        $.each(targetHandle, function (idx, el) {
            b = el.bounds;
            if (left + width > b.left &&
                left < b.left + b.width &&
                top + height > b.top &&
                top < b.top + b.height) {
                if (!el.entered) {
                    fireEvent('dropTargetEnter', { target: el.el });
                    el.entered = true;
                }
            } else {
                if (el.entered) {
                    fireEvent('dropTargetLeave', { target: el.el });
                    el.entered = false;
                }
            }
        });
    });
    function fireEvent(name, args) {
        var e = $.Event(name);
        e.args = args;
        return $('#dragme').trigger(e);
    }
    $('#dragme').jqxDragDrop({ dropTarget: target, feedback: 'original' });
    $('#dragme').bind('dropTargetEnter', function (event) { $(event.args.target).css('border', '2px solid #000'); }); //Works just fine.
    $('#dragme').bind('dropTargetLeave', function (event) { $(event.args.target).css('border', '0px'); }); //Never fires when I leave 
});

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com/

[jeffgackMember]

Thanks for the quick response, Minko. I’ll give it a shot.

[thabishMember]

Is this issue resolved in that latest release (2.5.5)?

[DimitarParticipant]

Hello thabish,

The dropTargetLeave event is called for every target as of version 2.5.5.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[thabishMember]

Thanks Dimitar!

After some investigation, the dropTargetLeave event does work on my end. However, it is the css update that does not work upon the event firing.

In my scenario, I have a js array that is repesented as cells in a table. And expecting the cell to be represented with no border on dropTargetLeave

i.e.

$(‘#element’).bind(‘dropTargetLeave’,
function (event) {
$(event.args.target).css(‘border’, ‘0px’);
});

$(‘#element’).bind(‘dropTargetEnter’,
function (event) {
$(event.args.target).css(‘border’, ‘2px solid #000’);
});

The CSS update on dropTargetLeave event only takes effect on the last table cell. All other cells remain with thickened border.

Let me know if you need further details.

Thanks!

[DimitarParticipant]

Hi thabish,

Thank you for your feedback. We will investigate the reported issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts