Results 1 to 2 of 2

Thread: How to rearrange items in a container with drag and drop.

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Vote Rating

    Default How to rearrange items in a container with drag and drop.

    I need to make a list that can be rearranged using drag and drop in a Sencha Touch 1.0 app. So what I did so far is to create a panel with the items list made out of alternating draggable and droppable panels. I can drag an item to a new position and I can get figure out where I need to insert it, but the problem is I can't figure out how to actually move the item within the panel.

    I tried to remove the item and insert it in the new location, but it's a bit slow and it stopped working once I changed the eventTarget on the Draggable object to point to a child of the item(the handle of the item that you have to use in order to drag it around).

    var paragraphText = p.el.dom.outerText;
    paragraphPanel.remove(paragraph, true);
    paragraphPanel.insert(dropIndex, createParagraph(paragraphText));

    I also tried not destroying the item and just removing it and inserting it right back in the new possition. This doesn't work at all, as in the drag is reset and nothing happens in the list, even though the code below gets executed.

    paragraphPanel.remove(paragraph, false);
    paragraphPanel.insert(dropIndex, paragraph);
    Any suggestions would be appreciated.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Looks like the layout never removes the DOM elements for when you remove an item but don't destroy the component.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts