[Solved] how to constrain drag and drop widgets to parent div?

[d_lMember]

I want to apply drag & drop to a series of jqxWidgets (such as Expanders) which are constrained to the dimensions of a parent div.

After dragging widgets around .. to sort them and snap to grid .. then I need to capture the sequence of order.

In other words a sortable storyboard where each widget can be expanded, collapsed or the order of display changed by snapping between widgets (MS Powerpoint is an example of the effect sought .. dragging slides around).

I’ve followed this demo as a template ..

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdragdrop/jquery-dragdrop-getting-started.htm

but when I apply this demo to jqxExpanders instead of simple div they can be dragged around but are not constrained to the boundaries of parent div.   Also I have to work out how to snap reordered widgets to grid.

Is there an example of this feature?

[DimitarParticipant]

Hello d_l,

Please check out the following jqxDragDrop demos:

Events

and

Default Functionality.

We hope they are helpful to you.

Best Regards,
Dimitar

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

[d_lMember]

Thanks.

If you refer to the defaultfunctionality link above.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdragdrop/defaultfunctionality.htm?web

instead of dragging the left hand objects (the T-shirts) into the target area (the shopping cart) for my requirement I would like to ignore the target shopping cart and reorder the left hand objects by drag and drop in their parent container.

i.e. squeezing and snapping draggable between other objects. A sortable index board.

I’ve now created in a container draggable objects (jqxPanels) which are constrained to the parent div using property restrictor: ‘parent’ (which acts like jQuery-ui “containment” property).

However I’ve noticed that when these panels have scrollbars the dragging “cursor fist” does not switch to cursor arrow mode over the scrollbars.

So ideally the draggable target areas or “drag handles” should exclude the areas for the vertical and horizontal scroll bars.
Perhaps a header div above each jqxPanel which acts as drag handle?

[d_lMember]

Solved

I’ve looked at *** and applied sortable method to my problem.

I embedded jqxPanels inside sortable containers.

I couldn’t find sortable methos in jqxWidgets. But if you can point to one I’ll try it.

I had to add link to jQuery-ui.js.

[d_lMember]

I’m surprised that my link (removed) to a standard jqueryui method .sortable conflicted with the forum policy ..

Do not mention other product vendors.

[Author]

Posts