Help finding a robust UI DnD, Cut/Paste & sortable directives

[Gary M]

Hi 

I'm fairly new to angularjs and have been working with it for about 2-3 months.  After the learning curve on how to construct the applications, I'm attempting to build a "real app". 

I've been having a tough time finding robust, sophisticated UI widgets which interoperate. I have found a number of directives for simple widgets eg, angular-ui and some other outliers with limited capabilities as sortable, ui.sortable and muti-sortable. I haven't found anything for cut and paste.

I'm assuming there are widgets modules out there, I guess I'm just not finding them.. I  have checked http://ngmodules.org/ and github but struck out there.

Any clues on where else to look ? or is what I'm looking for just doesn't exist ? 

cheers,

gary

[Gary M]

From the overwhelming response to this post, I'll make the assumption this is not the correct forum to post this question. 

Its too bad application and systems design is not a priority for the angularjs community, then possibly the short comings and gaps in the framework's design may be  addressed.

cheers

[Luke Kende]

I think we get used to frameworks having wide coverage like jQuery or ROR, but these things take time and there's a lot of competition right now for what will be the next javascripting tool.  I chose angular js because out of all the emerging libraries, frameworks, what-have-you, it seems the more promising for the future of web development.  In time, I believe we will see more plugins.  The community is still growing, just as this post demonstrates.

I don't know any cut-and-paste utilities, so might have to implement it yourself.  Most likely, it's been done before, but not sure if can be done in js alone, may require flash, or other embedded object that can make OS-level calls.  

If you can find an example, then it may just require implementing it in an "angular way".  

[Gary M]

 I do agree  we have become used to productive toolkits like jquery.. demands for developer productivity don't change because of the tool chain. 

Interesting perspective..I chose angular because of the restrictive design architecture which can serve to improve quality and ease into automated testability once the methodology is understood.. The use of directives as adapters to other tool chains inherits the quality practice of the dependency, somewhat defeating the benefit of angular while incurring the additional overhead.

I don't think the communities will ever make up their minds on the "next" javascript tooling.. Syntactic candies will entice each graduating class with a new shiny toy in each box.. Not everyone will like the same flavors. 

 The dnd and selectable are all specific cases of the more generalized editing functions (insert,cut,paste,delete,select,deselect,undo,redo) which are not fully formalized in the current angular framework and has implications to drawing, charting and other diagramming widgets and tool chains. 

The browser has the capability to cut/paste from the OS. The data format is an issue.. There are monolithic solutions supporting some of those capabilities, eg. ckeditor, but they lack modularity impedance to align with the angular way.. Today, moving to angular is reminiscent of programming in C/C++ moving to a mature java tool chain, then moving back to C.. It is painful, and I hope its worth the investment.

As for my little project, I'm looking at the jqueryUI directives to get a viable multilist, sortable working in a jquery layout. I'm dragging icons from sortables across different viewports to a sortable target which converts the icons to portals on drop. Very painful to attempt in angular right now.. I'll have to attempt something similar into a ckeditor target as well.

Unfortunately, there are few examples in this space..

 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/0SGuq-DLelk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Luke Kende]

So, other than implementing your own solution in Angular, what's the alternative?  Does another framework/library offer the design architecture along with an extensive set of plug-n-play utilities?  I don't honestly know, but I think the best you can get is one that offers the architecture yet allows jQuery plugin functionality without recoding to "fit".  When I researched several options to create a single page app, I did not see much that offered both.  Did you explore all the options out there these days:  http://todomvc.com/

To me trying out backbonejs and then going to angular was like going from C to Java as I put it.. you had to manage every little detail in backbone, and then trying angular it was like magic, no memory management required (metaphorically) it just made the connection between UI and js.  

Overall, I'm pretty happy with the results in Angular but I definitely had to jump through some hoops in the way I think and coming up with ways to get the job done. There's a trade off between architecture making the code more organized and being limited by that same architecture in some respects.  I find it and adventure to create functionality where it hasn't already been done.

That said, there's no reason why you have to keep everything in angular context.  It does not prevent you from just using jQuery outside of it... you just have to make then connection with $watch and $scope.apply.  

[Gary M]

Thanks for your comments, I now don't feel like I'm the only one out there..

I do look at alternatives all the time.. I jumped on dojotool kit for a few years, but progress was inconsistent. Some of the more sophisticated features stalled in the open source version, but was made available by IBM as a commercial product. Questions about the more primitive open source version of the modules were completely ignored and went unanswered. In part, this drove me to abandon the dojo investment and explore new tool chains.

I agree with your opinion about backbone. I didn't like it at all. Too much work for little result. 

Now that qt has a web interface and gtk+ is working with Broadway, other options may become available. 

I did look at todomvc. I did like it, but the testing framework supplied by angular seems to fit better into a software production environment.   

If your interested, this is one little technique I'm attempting to get working. It dragging a connected sortable across jquery layout viewports.  http://jsfiddle.net/GaryM/k2m3N/  Its broken right now, and I don't know why LOL.. it loses the drag image in the originating viewport. I think it is the z-axis, but jquery doc says it the wrong way to fix it..  I posted the question on stackoverflow http://stackoverflow.com/questions/22134917/angularui-how-to-drag-connected-ui-sortable-across-jquery-layout-viewports

cheers

[Luke Kende]

Yep, it's broken.  Don't have time to check it out at the moment, but wanted to mention there are some implementations of sortable and IDEs:

http://angular-ui.github.io/#ui-modules

If you do a search about drag and drop on this group, there are several people who have attempted that functionality.  Though this one is a form builder, you can see that it's already implemented with drag and drop: http://kelp404.github.io/angular-form-builder/  You might be able to find some other examples in the search... I know I've seen it before working fairly well... just not published as a UI tool yet (that I know of).

That leaves the cut/paste, which as we mentioned before, will probably require building, but I have not looking into that IDE plugin... it may already solve that problem.

I think that part of the reason there are not as many responses on here is that people are too busy being building their own projects and a lot of us are still learning and creating instead of putting time back into the community.  It's been about a year for me and I depending on others, so try to contribute back as I can.  The community is not quite there yet where there are enough experts with enough time to share their knowledge, and other than the Angular-UI project, not a lot of focused projects to address missing toolkits so far... it will get there I believe.

Good coding to you Gary!

[Gary M]

Someone on stackoverflow let me know what was wrong.. http://stackoverflow.com/questions/22138502/how-to-make-angularui-sortable-connect-lists-in-different-divs  The jquery sortable directive requires no additional elements between the elements where the sortable is defined..  This is the fixed fiddler http://jsfiddle.net/GaryM/5pkUz/    Now I just have to figure out the drag z-axis and how to get the placeholder to track the size of the dragged item instead of the fixed dimension defined in the css.

Thanks for the link to the form builder.. I'll look at it in the am.. 

The cut n' paste is ng-grid and text is sort of working in different models, all very limited in capability. I'm probably going to design one this week taking a framework approach. TinyMCE and ckedit  is a good source of inspiration.

 I'll be placing most the work on jsfiddle for general consumption. Unfortunately, I don't have the time to build and support a full package.. Unless I find someone to sponsor the project. 

 

[Péter Frivalszky]

The sortable directive linked by Luke Kende (https://github.com/angular-ui/ui-sortable) worked for us as well, but I must warn you to check that code for unnecessary watches. Those scope.$watch definitions multiplied our digest loops by a lot. Be sure to implement a newValue != oldValue comparison where possible, or eliminate the whole scope.$watch where applicable.