Jqxlistbox drag and drop item width

[alex.devMember]

HI,

I am using two listBoxes  #listBoxA and #listBoxB , i am binding the data from the server , i have set the listbox width for both the listboxes.

Problem faced: When i drag and drop #listBoxA to #listBoxB  the item from  #listBoxA exceeds the width of the page and i am unable to drop it on #listBoxB. Basically when i drag,  the item width should be set to a range so that the drop happens successfully, please suggest a way.

Many Thanks,

alex.dev

[Peter StoevKeymaster]

Hi alex.dev,

Please, provide a sample which demonstrates your issue. In addition, provide details about your browser, jQuery and jQWidgets version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[alex.devMember]

hi Peter,

Its same as the example in the demo. I have items inside the listbox whose width is almost as as wide as the monitor screen, i need to adjust the item width when i drag it from the list box so that it can be dropped into another listBox without any problems.

Browser : IE8 ;
Version: 8.0.7601.17514

jqwidgets-ver2.6.1
jquery-1.8.2.min.js

// Create a jqxListBox
$(“#listBoxGroupFeatures”).jqxListBox({ allowDrop: true, allowDrag: true, source: dataAdapterGroupFeatures, displayMember: “Name”, valueMember: “FeatureID”, width: 350, height: 450, theme: theme,
dragStart: function (item) {
if (item.label == “Breve”)
return false;
},
renderer: function (index, label, value) {
return label;
}
});
$(“#listBoxMasterFeatures”).jqxListBox({ allowDrop: true, allowDrag: true, selectedIndex: 1, multipleextended: true, source: dataAdapterMasterFeatures, displayMember: “Name”, valueMember: “FeatureID”, width: 350, height: 450, theme: theme,
dragEnd: function (dragItem, dropItem) {

},
selectedIndex: 0,
renderer: function (index, label, value) {
// $(“#listBoxMasterFeatures”).jqxListBox(‘focus’);
return label;
}
});

$(“#listBoxGroupFeatures, #listBoxMasterFeatures”).bind(‘dragStart’, function (event) {
$(“#dragStartLog”).text(“Drag Start: ” + event.args.label);
$(“#dragEndLog”).text(“”);

});

$(“#listBoxGroupFeatures, #listBoxMasterFeatures”).bind(‘dragEnd’, function (event) {
$(“#dragEndLog”).text(“Drag End”);
if (event.args.label) {
var ev = event.args.originalEvent;
var x = ev.pageX;
var y = ev.pageY;
if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
var touch = event.args.originalEvent.originalEvent.changedTouches[0];
x = touch.pageX;
y = touch.pageY;

}
}
});
}

Any help is much appreciated..Many thanks

[Peter StoevKeymaster]

Hi alex.dev,

It is currently not possible to customize the ListBox’s drag feedback.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts