HTML Draggable Item

[JakeWidgetMember]

I would like to have an item in my jqxListBox support the “ondragstart” event. However this event seems to not get passed through, even though dragging on the listbox itself is disabled. I am using the HTML drag event and “dataTransfer” members to try and facilitate dragging from the list to a drop target outside of the listbox (just a normal HTML table elsewhere on the page).

Here is how I am creating my listbox:

$(“#mybox”).jqxListBox(
{
theme: ‘classic’, width: 250, height: 250, displayMember: ‘name’, valueMember: ‘my_id’,
renderer: function (index, label, value)
{
return “

<div draggable='true' ondragstart='alert(1);'><img src='image.jpg'/>test item</div>

“:
}
});

This all works properly except that the ondragstart event never fires. Other HTML events work (such as onclick).

Thanks!
Jake

Note: I modified the dragging code included in the example above for simplicity. I believe that will also work, but the code I am actually using is cut and paste from a working example elsewhere on my page. I’m pretty sure it is the interaction between the listbox and the drag drop that is causing my problems, and not my HTML specifically.

[Peter StoevKeymaster]

Hi JakeWidget,

There are already dragging events built-in the jqxListBox. Here’s a sample: dragdrop.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[JakeWidgetMember]

Hi Peter,

Thanks for your EXTREMELY fast response!

My hope was to use the HTML dragging events so that it worked with a fair amount of other code that I already have in place. Among other things the target recipient is expecting a HTML dragEvent (rather than a jqx one) to process the event. The HTML code uses the “dataTransfer” mechanism and I was hoping to setup the same thing.

Specifically it currently does something like this:

ondragstart=’event.dataTransfer.setData(“SourceItem”, sourceItemID);’

and then later

ondrop=’alert(event.dataTransfer.getData(“SourceItem”));’

Obviously I could add support to my drop target to accept either type of drag sources, but in the interests of simplicity and minimizing code I was hoping to not have too. If it is not possible, or overly complex to achieve a workaround I will just go ahead and do that 🙂

Thanks!
Jake

[Author]

Posts