Handle sortable in nested collections recipe

[patagoniahiker]

Hi, I am using your forms for nested collections :+1: . Can you add please/handle sortable and drag drop in nested collections, if you want I can post a couple of samples.

thanks

[sergy79]

A link to some code http://j.mp/1nraN6T

[manualshifter]

Hi I am interested in this feature as well :+1: can I ask you guys how do you persist this in the database table? what structure do you follow.

[mcintyre321]

Are you guys talking about drag/drop for the existing icollection stuff on the demo site (which handles moveup/movedown) On 24 Jan 2016 19:00, "manualshifter" notifications@github.com wrote:

Hi I am interested in this feature as well [image: :+1:] can I ask you guys how do you persist this in the database table? what structure do you follow.

— Reply to this email directly or view it on GitHub https://github.com/mcintyre321/FormFactory/issues/19#issuecomment-174330668 .

[manualshifter]

Yes, in your demo you have the list to move up and down.

In my application, I am using this and need it for nested lists and sortable:

• Within the same list
• Across two lists nice to Have

First one is better rubuxa is better 1 http://j.mp/1OQNh9G 2 http://j.mp/1NtXKWS

I was thinking it would be nice if we could specify the target lists with an Attribute like this where the drop handles would work.

[DragSourceEnabled] [DropTargetEnabled] Obj/model - SourceListCollection

[DropTargetEnabled] Obj - TargetListCollection

[mcintyre321]

I'm unlikely to work on this any time soon, but I do think it would be a good feature to have, and would happily accept a pull request*.

*with certain coding standard to be met e.g.

• example on docs page
• works with nested collections
• need good justification to use an external library, as we already depend on jquery ui
• probably some other things :P

[manualshifter]

I would love to, I would need some help on how to wire it up. I am not as proficient as you :))

The good thing is I clearly understand what would make a good user experience. So I would need to be guided on where all I would need to make changes.

Rather than update the current collection item you have, I was planning on adding support for a new one.

Just know that I might fail (pretty poorly) and you/someone here might need to help me. I see its getting popular recently.

thanks drive baby drive :)

[patagoniahiker]

I tried myself as well, could not get it working so I gave up after sometime. I need to know how to wire it up at the different levels. UI, Domain, View Engine etc.

[mcintyre321]

OK so I've enabled in-list drag and drop using the HTML5 draggable API, which unfortunately doesn't support touch screen, but mouse dragging works.

Here's the commit if you are interested in how it works: https://github.com/mcintyre321/FormFactory/commit/f391a4c8920f6dae9b38fcfdee1d301b75379d9b

There are libraries (as linked above) which support touch events, but they don't work with event delegation as far as I can tell. If anyone wants to improve this solution, please feel free to do so in a PR.

[mcintyre321]

This works in chrome, Edge, and IE, haven't tested FF and Safari.

[manualshifter]

This is awesome :+1:

I want to help extend it. Not sure why it closed, lots of community participation

thanks again

[patagoniahiker]

I tested it works, would like to add an icon to the div besides the title

// snippet for highlight

 $(".droppable").droppable({
 accept: '.draggable',
 over: function(event, ui) {
   $(this).addClass('tempHighlight');
 },
 out: function(event, ui) {
   $(this).removeClass('tempHighlight');
 },    
 drop: function() {
    //do some stuff
 }
 });

// snippet for drag handle

 $(row).draggable({
handle: '#handle1, #handle2',
 });

[manualshifter]

This was added - draggable="true" id="listitem-@id" , wondering where is the order being serialized and saved/POSTED

Here are the changes, I cant find it though https://github.com/mcintyre321/FormFactory/commit/f391a4c8920f6dae9b38fcfdee1d301b75379d9b

Wondering

[patagoniahiker]

Are you referring to this? I am trying to wire it up to an update/POST will let you know soon.

       $(document).on("drop", function (e) {
           e.preventDefault();
           e.stopPropagation();
           var $src = $(document.getElementById(e.originalEvent.dataTransfer.getData("text")))
               .closest("li[draggable=true]");
           var $target = $(e.target).closest("li[draggable=true]");
           if ($target.length && $target[0] !== $src[0] 
                  && $target[0].parentElement === $src[0].parentElement) {
               var beforeOrAfter = $src.index() > $target.index();
               $src.remove();
               if (beforeOrAfter) {
                   $src.insertBefore($target);
               } else {
                   $src.insertAfter($target);
               }
               console.log("dropped");
           }
       });

This is how I can get the serialize the list var droppedSortedList = $( ".selector" ).sortable( "serialize", { key: "sort" } ); for e.g. here it would be we need to wire this to the Save/Update Handler $src.sortable( "serialize", { key: "sort" } );

can someone tell me where the update function is, so I can wire it up there.

[manualshifter]

@mcintyre321 & @patagoniahiker thank you so much :100: for both...

can you please show me how to do the model update/save, after drag complete.

[mcintyre321]

So all you should need to do to save/post it is put it inside a form element and send it to the server.

FormFactory and the collections stuff should be compatible with http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx (or at least it was about 3 years ago, last time i checked!). I haven't checked, but maybe the code which does moveup/movedown/drop needs to do some array renumbering...

If you want to use ajax, or something, you can serialize the form using form2js https://github.com/lookfirst/form2js

[mcintyre321]

Please make any changes on a fork, and send a PR when you want me to review them. I'm not going to integrate snippets.

[manualshifter]

I am new to git hub, let me try to get it working and then make the update