ListBox DragDrop Target

[jsmcnealParticipant]

I need my interface to ‘return’ during a dragEnd event if a user drags an object from one listbox onto anything that is not a listbox.

My interface consists of a jqxWindow with a sourcing jqxListBox of objects and a jqxpanel that consists of 1..n jqxListBox targets. In the case of having only one target jqxListBox, the panel is 1/3 empty, so the user ‘can possibly’ drag an object into the panel where there is no listBox.

I am using dragEnd event as an update to my server application when objects are dragged between lists. Is there a method or property that will tell me what element the mouse is hovering over when an object is dropped, or what selector ID the mouse was hovering over?

[MartinParticipant]

Hello jsmcneal,

You can get the drop target element by the event.args.dropTargetElement property in the dragEnd event handler.
You can see this Example.

Best Regards,
Martin

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

[jsmcnealParticipant]

Thank you for the quick response, Martin.

I do not see dropTargetElement when I open the event object in the debugger. This is what is available to me:
_proto_
label
originalEvent
owner
value

My application is running jQuery lib v2.1.3 which I suspect is my problem of not seeing dropTargetElement. If I can’t step up to v3.0+, is there any other property/method that I can use?

Regards,
jsmcneal

[MartinParticipant]

Hello jsmcneal,

I don’t think that the issue comes from the jQuery version.

You can see a fiddle example Here with jQuery v2.1.3.
Which jqwidgets files have you imported?

Best Regards,
Martin

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

[jsmcnealParticipant]

Hello Martin,

I see your example is working fine with jQuery 2.3.1 and I concur that appears not to be my problem.

My application is using jqwidgets v4.5.1. (April 2017).

As it turns out, I won’t be able to upgrade jQuery or jqwidgets at this time because of the re-testing/re-integration effort involved on the software application that I am working on.

Regards,
jsmcneal

[MartinParticipant]

Hello jsmcneal,

Yes, so you don’t see the dropTargetElement because of the jqwidgets version.
Unfortunately, we cannot provide you a fix for an older version.

As a workaround, I would suggest you to implement your logic using the the X and Y coordinates in the event.args.originalEvent

Best Regards,
Martin

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

[jsmcnealParticipant]

Greetings, Martin,

Could you elaborate a bit further on your X and Y coordinate suggestion? Would I be using clientX and clientY to compute where the mouse pointer is located in relation to the jqxPanel?

Here is something else I tried, but does not seem to work: I tried to attach an EventListener to my panel for mouseup event.

$(‘#MyPanel’)[0].addEventListener(‘mouseup’, function (event)
{
setFlag = true;
});
It appears that the mouseup event does not fire when an object gets drag/drop into the panel. Does jqxlistBox block some events from firing?

Thank you,
jsmnceal

[MartinParticipant]

Hello jsmnceal,

Yes, I suggest you to use clientX and clientY coordinates and compare them with the position of the jqxPanel.
You can use this for the panel position: ($("#MyPanel:first")).offset()

You are right about the mouseup event. The draganddrop prevents the default mouse events, this is why it is not fired.

Best Regards,
Martin

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

[Author]

Posts