locked
Beginner's question involving jQuery-Sortable and jQuery in general RRS feed

  • Question

  • User625999351 posted

    I have very little experience using JavaScript/jQuery in an MVC environment.  I'm currently trying to figure out how a program works (no documentation) and my primary concern is one particular page.  It appears that the developers made use of a 3rd party package called jQuery-Sortable.  (http://johnny.github.io/jquery-sortable/)

    The page in question has 2 side by side ULs and the main function is to drag items (<li>) from one list to the other, one item at a time. 

    The relevant code is as follows.  I think I can see how it references the components in the cshtml but I'm not clear how the actual dragging is accomplished.  $left and $right are clearly the two <UL>s involved and I have seen in tracing how the adjustment is set.

    A few questions:

    • What does that _super call do?
    • Is there any way once an item has been dropped on a list to trigger a re-sort of the list?
    • Is there any way using this package alone to permit multiple selections?  (i.e. Select multiple items before dragging. My attempts to include jQueryUI selectable have not gone well).
    • If not, is there already some existing alternative out there that will allow me to replace jQuery-Sortable with the necessary attributes (multiple selects plus drag/drop in ordered lists as a minimum.)

        var $parentDiv = $('#raw-data');
        var $left = $parentDiv.find('.left ul');
        var $right = $parentDiv.find('.right ul');
        var adjustment;
    
        $parentDiv.find('ul').sortable({
            group: 'month',
            onDragStart: function ($item, container, _super) {
                var offset = $item.offset(),
                pointer = container.rootGroup.pointer;
    
                adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
                };
    
                _super($item, container);
            },
            onDrag: function ($item, position) {
                $item.css({
                    left: position.left - adjustment.left,
                    top: position.top - adjustment.top
                });
            }
        });
    

    Thursday, September 1, 2016 7:11 PM

All replies

  • User-474980206 posted

    you should read the docs.

    •  _super is a call to the default implementation of the action. 
    •  see the afterMove event
    •  the package has no notion of selected items. you would need to modify the code to support this.  you could do a fork on github
    •  no idea - try a google search

    I have never used this library, but the code looks simple. to support multiple move, you'd need to add support for selection (simple add class on click would work), move of arrays of items, then decide how the move animation would look with multiple items. 

    Thursday, September 1, 2016 9:35 PM
  • User625999351 posted

    Actually I've decided to go with jquery.mutisortable (https://github.com/shvetsgroup/jquery.multisortable) which has solved most but not all of my problems.

    This is still a work in progress.

    Thursday, September 15, 2016 5:21 PM
  • User-1142886626 posted

    Hi bchernick,

    • Is there any way using this package alone to permit multiple selections?  (i.e. Select multiple items before dragging. My attempts to include jQueryUI selectable have not gone well).
    • If not, is there already some existing alternative out there that will allow me to replace jQuery-Sortable with the necessary attributes (multiple selects plus drag/drop in ordered lists as a minimum.)

    From your description, you could use draggable & droppable achieve this. The droppable create targets for drappable elements. The draggable allow elements to be moved using the mouse.

    You could refer the following article about-jQuery Sortable Select and drag multiple list items.

    http://stackoverflow.com/a/3779355

    demo here:

    http://jsfiddle.net/T68Fn/

    Best regards,

    Ailleen

    Friday, September 30, 2016 6:33 AM