feat: change arbitrary parent element css selector on drag drop

[garymazz]

When using ui-sortable with jquery layout, the z-index of the drag pane needs to be greater than the other elements, eg the sliders.

On drag/drop, insert/change/remove the z-index to the designated element or a css selector to the designated element. The latter method would create more a generalized solution with increased application.

After the drop, the change should be reversed.

Not sure if activate/deactivate or start/stop is a better place to hook the event. It will need to undo the changes on cancel.

cheers

[thgreasi]

This library contains only the appropriate logic to bring the sortable interaction to the angularjs world. All the appropriate CSS classes are assigned to the ui-sortable element and the dragged item by jquery-ui. Did you include jquery-ui CSS file? Can you provide an equivalent non-angular example (codepen/jsfiddle/...) that it's not affected by your finding? (A side by side comparison would be even better though.) In its current state, I think this should be marked as a jquery-ui issue.

[garymazz]

Yes, in case dragging from one jquery layout pane to another, the z-index of the source pane must be greater than the z-index of the other elements including the resize bars, toggler-buttons, slider-bars and destination pane(s). In more complex scenarios where one would drag and drop between arbitrary panes, the z-index of the source pane is required to dynamically set greater than other layout elements.

See their tips: http://layout.jquery-dev.com/tips.cfm#Draggables

The same is true for drop downs, message boxes, etc.. It appears work around must be implemented for each widget.

I do see you point about it being a jquery ui layout issue. The method they recommend is trigger changing the element's css on an event.

I thought it would be a great feature to alter the css of an an arbitrary element on start,stop, activate, deactivate..

I'll fork and make the change this weekend

On Wed, Oct 8, 2014 at 9:43 AM, Thodoris Greasidis <notifications@github.com

wrote:

This library contains only the appropriate logic to bring the sortable interaction to the angularjs world. All the appropriate CSS classes are assigned to the ui-sortable element and the dragged item by jquery-ui. Did you include jquery-ui CSS file? Can you provide an equivalent non-angular example (codepen/jsfiddle/...) that it's not affected by your finding? (A side by side comparison would be even better though.) In its current state, I think this should be marked as a jquery-ui issue.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-58378688 .

[thgreasi]

I would suggest you to use the workaround described there just for the cases that is really needed, by using the sortableOptions object. Keep in mind that if such a change was included in a core repo, might break other use cases, such as overlays and modal dialogs. Each plugin should have minimal css requirements to avoid greater incompatibilities (in fact ui-sortable does not need jquery-ui.css at all). Those are obviously some of the reasons that such a workaround is not merged in the main jquery-ui-sortable repo till now.

[garymazz]

Hi Thorodis

The work around described in your link does not work in the case of the jquery ui layout. The z-index in this work around only effects the object dragged and not the surrounding/parent elements required for ui layout.

Jquery ui has some obvious gaps with interactions and compatibility within there widget collections which forces the developer to wrap their with workarounds. Angularjs plugins are another type of wrapper for the various external components. It only makes sense to provide a formalization/best practice (at the least) for the wrapper architecture where the workarounds can/should be added. The formalization will both close the gap in source widgets, improve the quality and reuse of workarounds; improving the value of the of wrapper (ui-sortable).

Angularjs is an fledgling technology in comparison to many js widget collections. I think it would be easier to add a formalization for workarounds to robust wrappers (ie ui-sortable) early on, than let it languish until later.

On Sat, Oct 11, 2014 at 3:05 AM, Thodoris Greasidis < notifications@github.com> wrote:

Closed #277 https://github.com/angular-ui/ui-sortable/issues/277.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#event-177241066.

[garymazz]

Ugh the link you provided did work, it did work. It was the version of Safari & jquery I was using. It worked in FF, chrome and IE.

The sortable workaround creates a clone leaving the source object. The an additional operation is required to delete the source object which makes the ui operation very clunky looking.. You can see the delete..

On Sat, Oct 11, 2014 at 9:53 AM, Gary M garym@oedata.com wrote:

Hi Thorodis

The work around described in your link does not work in the case of the jquery ui layout. The z-index in this work around only effects the object dragged and not the surrounding/parent elements required for ui layout.

Jquery ui has some obvious gaps with interactions and compatibility within there widget collections which forces the developer to wrap their with workarounds. Angularjs plugins are another type of wrapper for the various external components. It only makes sense to provide a formalization/best practice (at the least) for the wrapper architecture where the workarounds can/should be added. The formalization will both close the gap in source widgets, improve the quality and reuse of workarounds; improving the value of the of wrapper (ui-sortable).

Angularjs is an fledgling technology in comparison to many js widget collections. I think it would be easier to add a formalization for workarounds to robust wrappers (ie ui-sortable) early on, than let it languish until later.

On Sat, Oct 11, 2014 at 3:05 AM, Thodoris Greasidis < notifications@github.com> wrote:

Closed #277 https://github.com/angular-ui/ui-sortable/issues/277.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#event-177241066.

[thgreasi]

Thanks for sharing your findings :+1:

[thgreasi]

Issues like this stand for a very good documentation for people looking to implement something a bit more extreme than the usual/simple use cases.

[garymazz]

Agreed.. An example is changing the behavior of source in the cloning example. In the example, the source sortable re-layouts as the dragged object exits the view port. After the stop event, dragged object is then reinserted into the source and the source viewport is again re-layout. If the source is a single column, as in the example code.. it is not too visually disruptive. However if the source is a fluid list of objects, all are moved making the operation distracting to the user.

There are other approaches to these and other like issues. Each requires an approach compatible with the angularjs structure. For example, integrating a draggable into a sortable.

In this approach: http://stackoverflow.com/questions/20986157/make-draggable-element-sortable-within-droppable-using-jquery-ui I find it difficult to restructure the code to work with your plugin.. Major gaps in integrating these widgets wrapped in a angularjs. I'm wondering if anyone has solved this issues, either through best practices or technology ?

On Sun, Oct 12, 2014 at 8:21 AM, Thodoris Greasidis < notifications@github.com> wrote:

Issues like this stand for a very good documentation for people looking to implement something a bit more extreme than the usual/simple use cases.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-58801248 .

[garymazz]

OK, I'm getting some work done on it..

I have an excel spreadsheet comparing the options, methods, and events from jquery draggble, droppable, sortable, and selectable. How can I send it to you ? gary

On Sun, Oct 12, 2014 at 10:02 PM, Gary M garym@oedata.com wrote:

Agreed.. An example is changing the behavior of source in the cloning example. In the example, the source sortable re-layouts as the dragged object exits the view port. After the stop event, dragged object is then reinserted into the source and the source viewport is again re-layout. If the source is a single column, as in the example code.. it is not too visually disruptive. However if the source is a fluid list of objects, all are moved making the operation distracting to the user.

There are other approaches to these and other like issues. Each requires an approach compatible with the angularjs structure. For example, integrating a draggable into a sortable.

In this approach: http://stackoverflow.com/questions/20986157/make-draggable-element-sortable-within-droppable-using-jquery-ui I find it difficult to restructure the code to work with your plugin.. Major gaps in integrating these widgets wrapped in a angularjs. I'm wondering if anyone has solved this issues, either through best practices or technology ?

On Sun, Oct 12, 2014 at 8:21 AM, Thodoris Greasidis < notifications@github.com> wrote:

Issues like this stand for a very good documentation for people looking to implement something a bit more extreme than the usual/simple use cases.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-58801248 .

[thgreasi]

Just add a Google drive/docs share URL.

[garymazz]

OK,

I was working on a diagram and the spreadsheet. I do this to keep details from dropping though cracks and I like pictures..

https://drive.google.com/file/d/0BzI1pouUgWdNeG5GbXZGQ3RQMGs/view?usp=sharing https://drive.google.com/file/d/0BzI1pouUgWdNRVVJLXpTSzZqNjA/view?usp=sharing

Let me know if you can't get them

On Wed, Oct 15, 2014 at 10:49 PM, Thodoris Greasidis < notifications@github.com> wrote:

Just add a Google drive/docs share URL.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-59313740 .

[garymazz]

There is a gap describing the role of the "helper".. In some cases, the helper is used as a proxy to circumvent interactions with other elements. For example, cloning to create an an element to drag across layout panels. In other case, the helper is used to alter elements' css.. We need a clarification of what the helper does at the DOM to understand it's capability.

The helper's "clone" option is also a bit confusing..

Another other gap is the the placeholder. Placeholders are assumed to be fixed size, although any arbitrary function may be applied creating the dimensional element. In most cases, placeholder holder have two main roles, the first is the provide a preview of what the drop target will look like after the drop. The second common role is to preserve the source sortable's conformation until a drop has occurred. I believe these roles and how to implement them are not well understood as well as how to manage the data on the angular side of the equation.

Placeholders properties are another area of mystery. We'll likely have to as the jquery ui teams for a formalization and extend-ability.. For example, which methods are applicable to placeholders ?

See here to how to use clone to create an placeholder the same dimensions of the dragged object: http://stackoverflow.com/questions/18365768/jquery-ui-sortable-placeholder-clone-of-item-being-sorted

These are some jquery interaction integrations: Selectable->Sortable Source "Sortable source can have multiple selected object listed in an array" Selectable->Sortable Target "Sortable target can accept multiple objects from an array" Selectable->Draggable "Draggable source can can select multiple objects and place them in an array for xfer to target" Draggable->Sortable Target "Draggable can can select multiple objects and place them in an array for xfer to target" Sortable Source->Droppable "Droppable can accept objects from a Sortable source"

Some of these integrations are already supported by the widgets.. Some are supported procedurally with external code.

I've looked at several different approaches to handling widget configuration for angularjs wrappers to jquery-ui widgets. I like your approach the best, it provides an mechanism that can be used across several wrappers. The Options object also gives a way to create integration recipes, making this stuff easier to use..

-gary

On Thu, Oct 16, 2014 at 12:51 AM, Gary M garym@oedata.com wrote:

OK,

I was working on a diagram and the spreadsheet. I do this to keep details from dropping though cracks and I like pictures..

https://drive.google.com/file/d/0BzI1pouUgWdNeG5GbXZGQ3RQMGs/view?usp=sharing

https://drive.google.com/file/d/0BzI1pouUgWdNRVVJLXpTSzZqNjA/view?usp=sharing

Let me know if you can't get them

On Wed, Oct 15, 2014 at 10:49 PM, Thodoris Greasidis < notifications@github.com> wrote:

Just add a Google drive/docs share URL.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-59313740 .

[thgreasi]

Wow that's a huge research and documentation! Some of the above can be useful even for vanilla jquery-ui developers/integrators.

Since interactions of ui-sortable with other wrapped widgets are not officially supported, since they are developed from deferent teams with small collaboration and based on different needs, most of the time I like to use ui-sortable for different purposes. For example, a ui-sortable element with one item connected with an other one, can be used for the draggable droppable interaction.

[garymazz]

Hi,

Thanks, but it wan't all that much work, maybe 90 minutes on the outside.. Feel free to use and distribute this info where ever you feel it can do the most (or any) good..

Yeah I know about the support of the other widgets.. I think I may write a few if I can find time or a sponsor for the work..

If you really think about it, all these interactions are forms of graphical editors. So, I'm writing a broker directive that dispatches editor events and possibly execute registered callbacks..I have about 15 defined base events defined. I'm indecisive whether to put a "before" and "after" on the events. eg 'move', // indicates a move operation is executing. 'movestart', // indicates a move operation is starting execution. 'moveend', // indicates a move operation has completed execution.

I'll know more tomorrow

On Thu, Oct 16, 2014 at 3:33 PM, Thodoris Greasidis < notifications@github.com> wrote:

Wow that's a huge research and documentation! Some of the above can be useful even for vanilla jquery-ui developers/integrators.

Since interactions of ui-sortable with other wrapped widgets are not officially supported, since they are developed from deferent teams with small collaboration and based on different needs, most of the time I like to use ui-sortable for different purposes. For example, a ui-sortable element with one item connected with an other one, can be used for the draggable droppable interaction.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-59434330 .

[garymazz]

Hi,

Made an update to the diagrams file. https://drive.google.com/a/oedata.com/file/d/0BzI1pouUgWdNV19EdXRqNm5ldWs/view?usp=sharing

I added a conceptual pipelined architecture for a generalized editor. The editor is intended to support text and dimensional editor like soratbles and SVG drawing libs.

The design (next stage) will incorporate the broker which supports the events and modules' pipeline..Although it seems a bit convoluted, it will make the overall mechanism for integrating this class of third party libraries into angular a bit easier, more inter-operable and more maintainable.

The concept of a pipeline is much like the connectTo in jquery in case you were wondering..

On Thu, Oct 16, 2014 at 9:06 PM, Gary M garym@oedata.com wrote:

Hi,

Thanks, but it wan't all that much work, maybe 90 minutes on the outside.. Feel free to use and distribute this info where ever you feel it can do the most (or any) good..

Yeah I know about the support of the other widgets.. I think I may write a few if I can find time or a sponsor for the work..

If you really think about it, all these interactions are forms of graphical editors. So, I'm writing a broker directive that dispatches editor events and possibly execute registered callbacks..I have about 15 defined base events defined. I'm indecisive whether to put a "before" and "after" on the events. eg 'move', // indicates a move operation is executing. 'movestart', // indicates a move operation is starting execution. 'moveend', // indicates a move operation has completed execution.

I'll know more tomorrow

On Thu, Oct 16, 2014 at 3:33 PM, Thodoris Greasidis < notifications@github.com> wrote:

Wow that's a huge research and documentation! Some of the above can be useful even for vanilla jquery-ui developers/integrators.

Since interactions of ui-sortable with other wrapped widgets are not officially supported, since they are developed from deferent teams with small collaboration and based on different needs, most of the time I like to use ui-sortable for different purposes. For example, a ui-sortable element with one item connected with an other one, can be used for the draggable droppable interaction.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-59434330 .

[thgreasi]

You should really create a Github user page and create a page/post with all these info.

[garymazz]

Thanks as soon as I get some code to put up :)

On Sat, Oct 18, 2014 at 10:14 AM, Thodoris Greasidis < notifications@github.com> wrote:

You should really create a Github user page https://pages.github.com/ and create a page/post with all these info.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-sortable/issues/277#issuecomment-59620108 .