Results 1 to 9 of 9

Thread: Drag and Drop List Items

  1. #1

    Default

    I have done some moderate research on implementing a list whose items can be dragged and dropped to your hearts content (Within the same list) without much headway. I have seen examples which involve dragged containers and things, but nothing with list items. It is relatively common with native applications and my user wants it. Can someone provide me an example of how to do this with the lastest version of sencha touch 2.2? To be clear, a list of 15 items, they want to drag item "15" to the "1" slot and have everything shift accordingly.

  2. #2

    Default

    anyone?

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    118
    Answers
    8

    Default Can Sencha develop team tell us why drag and drop not in touch 2.2? what's hard?

    This is one of the most required feature by tablet users.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    Linz, AT
    Posts
    31
    Answers
    1

    Default

    That's a really good question. Drag and Drop is really a must have in mobile development for tablets and smartphones... I hope Sencha is soon able to accomplish this.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Location
    San Jos, Costa Rica.
    Posts
    88
    Answers
    14

  6. #6

    Default

    If you read through that thread, it is talking about drag and dropping containers. Completely different that what I want to do. Dragging "listItems" is a whole different beast that comes with many issues, i.e. scrolling, animations on drop, etc. I was hoping sencha would have something for this by now.

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Location
    San Jos, Costa Rica.
    Posts
    88
    Answers
    14

    Default

    I did not say you will find there the exact code lines to achieve your requirement... I just thought you could find there some clues regarding dragging and dropping elements.

  8. #8

    Default

    For anyone interested in doing this, I'd suggest the following approach:

    Smoke and Mirrors!

    What I did, add a panel into your list on each row, which I styled as a drag N drop image.
    On item tap hold on that image, set it to draggable, and restyle it to look JUST like your list row. Set some listeners on that panel's dragstart, drag, and dragend, which control the list. Basically, you'd set the list.setScrollable(false) and start programmatically scrolling the list as your drag the "panel" down or up. The key, on dragend, you need to find out what list row is below, take his field (the field you are ordering with) and overwrite the corresponding field that you started the drag from. Once that is done, destroy the dragged panel, add a replacement "image panel" into the list row, and your done! Letting the store do the work for you is the best approach. There is no "drop."

    Note:
    Setting drag constraints needs to happen.
    As you drag, you must constantly update the elements of each list row with their corresponding index. Dragging doesn't "know" what components are underneath him, unfortunately.

  9. #9
    Sencha User
    Join Date
    Jan 2012
    Location
    San Jos, Costa Rica.
    Posts
    88
    Answers
    14

    Default

    We want to see some code!

Posting Permissions

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