Drag & Drop dragEnd

[bronsonParticipant]

hi every body,
I want to fill a listB with the listA’s content as shown on jqwidgets’s example.
I meet 2 problems :
1/ I want, when the item drag to listB is finished, trigger a JS script,
2/ I want, when the listB is 3 items filled, to annihilate any possibility to drag from listA.

I’m just not able to manage those 2 problems, any kind of help would be appreciated !

Many thks

[Peter StoevKeymaster]

Hi bronson,

The ListBox widget have dragStart and dragEnd events. You can bind to them and add event handlers. When a drag operation is finished the dragEnd event is raised and so your event handler will be called. Inside the event handler, you can implement your custom logic. To disable dragging or dropping of items, you can dynamically set the allowDrag or allowDrop properties of the ListBox to either true or false.

$("#listBox").jqxListBox({allowDrag: false});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bronsonParticipant]

Hi Peter thks U for response which help a lot to set my drag&Drop function.
Best Regards

[bronsonParticipant]

Hi,
I’m still battling up the hill against border arounding the draggable items.
I could’nt find very much on the web and i can’t figure out how to fix it using either theme builder or JS scripts to change those borders params !

A hand would be great

Thks

[bronsonParticipant]

Pb solved now almost working

[bronsonParticipant]

An other pb came up now ! Grrrrr

I use for development purposes only jqwidgets ListBox example, i replaced data1 and data2 by my own datas which are like this.

'<li id="outil9-Item_1" class="lineitem SousText-Epce" style="height:15px; text-align:left; display:block; width: 120px; border: 0px solid #000000; "><table class="glisserDeposerComm"><tr><td>Mailing</td><td align="right"><input name="inputOutil9" type="text" class="SousText-Epce valeur" style="border:1px solid#CCCCCC; height:12px; width:60px; float: right; display: none; margin: 0 0 0 0; padding: 0 0 0 0; padding-left: 3px; text-align:right; vertical-align:text-top; cursor:text; " onfocus="coutActionCo(); " onblur="coutActionCo(); " onkeyup="lisibilite_nombre1(this); " value=""></td></tr></table></li>', '<li .... 

When i drag from A to B the item dragged is copied instead of being moved, when i drag back to A the items is only partially copied not moved !
The lists are all upside down items totally messed, mis aligned, font totally disorganized etc.

Why that ?

Thks

[bronsonParticipant]

Hi,

I’ve tried this

                $("#listBoxB").jqxListBox({ allowDrop: true, allowDrag: true, source: data2, width: 200, height: 250, theme: 'comperio',
                    dragEnd: function (dragItem, dropItem) {
                        if (dragItem.label == "Frappuccino")
                            return false;
                    },
                    renderer: function (index, label, value) {
                        if (label == "Frappuccino") {
                            return "<span style='color: red;'>" + label + "</span>";
                        }
						return '<table class="glisserDeposerComm"><tr><td class="Text-Epce">'+label+'</td><td align="right"><input name="inputOutil9" type="text" class="SousText-Epce glisserDeposerCommInput" style="display:block; " onfocus="coutActionCo(); " onblur="coutActionCo(); " onkeyup="lisibilite_nombre1(this); " value=""></td></tr></table>';
                    }
                });

trying to solve my pb by i cannot access the input to fill it, what that ?

[bronsonParticipant]

Hi every one,

I’m rewriting my inquiry.

I looking for setting up the flwg process.
• Load in a list box A data which have the flwg structure : : (about 10/12 rows)
• Drag a item (line) from A to a list box B in which i want to modify .
• Save to a mySql table the new values.

I red a lot about dataAdapter and try to find a guide line to set process but i failed.

Is there any one who can send on tracks which help me.

Many thks

[bronsonParticipant]

Hi every one,

I’m rewriting my inquiry.

I looking for setting up the flwg process.
• Load in a list box A data which have the flwg structure

<name:>name, <value>:value

(about 10/12 rows)
• Drag a item (line) from A to a list box B in which i want to modify .
• Save to a mySql table the new values.

I red a lot about dataAdapter and try to find a guide line to set process but i failed.

Is there any one who can send on tracks which help me.

Many thks

[Author]

Posts