JavaFX Drag and Drop Cell in ListView

Hello guys. Today I’ve got some free time to blog. I have made small chemical solution for making these things happen. I was thinking that most of the game developers really need this type of system even more in the content management system also this kind of stuffs are very useful So I’ve planned to blogged about this (Drag n Drop Cell).

Let’s first look over how the things works for the Draggable of list cell.

Drag and Drop Cell in ListView

The above figure is just the concept which I’ve predicted. You can use your own too But in this post I’m doing all stuffs by this algorithm.By the help of that algorithm I’ve made the things sucess.

First let’s start with the custom cell I’ve given that cell name as ListCellX.

FYI I’ve highlighted the codes above. I think you can easily understand the code. I’ve done some commented for codes which could be more clear enough too.

Ok Now After we build our Customized ListCellX we can now easily embed this Cell in our ListView by implementing the cellfactory of specified ListView. You must make sure that you have called the init(ObservableList). A sample work over this cell is given here.

In above code sample here we have added our own list cell factory so that that cell knows what we want to do on drag events.

I’ve also made one simple app(Friends List) by using this Facility and one of my best control(AutoFillTextBox). I’ve made that simple app available for you to see if you want.

Friends List Screenshot

I hope you enjoyed reading this post.
Thanks you ! See you coming free days. Have a good day 🙂

33 thoughts on “JavaFX Drag and Drop Cell in ListView”

  1. Pingback: Java desktop links of the week, May 14 | Jonathan Giles

  2. Pingback: JavaFX links of the week, May 14 // JavaFX News, Demos and Insight // FX Experience

  3. hi Narayan, your solution looks good. I need to develop something similar for my Table where I should be able to drag and drop the rows. Let me see how it goes in my side.

  4. Hi Sarad,
    The algorithm is same on TableView. You just need to know the row index of items ObservableList of any table cell while on DND event and change the indexing of the ‘items’ ObservableList .Finally the effects will be automatically updated in main TableView.

    Thanks
    Narayan

  5. Thanks , the dragdrop is working for my table. However, I have an issue with a dynamic column getting updated automatically after the drag&drop.
    The thing is – user can add columns dynamically in my table. To adjust this , I have a map in the data Model object, I have linked the map with the CellValueFactory.
    Now when I drag and drop a row onto another , the newest data on the cell gets overwritten .
    The cellvalueFactory is as follows:

    newCol.setCellValueFactory(new Callback<TableColumn.CellDataFeatures, ObservableValue>() {
    @Override
    public ObservableValue call(TableColumn.CellDataFeatures p) {
    String columnData = “Please enter the data”;
    Map agendaMap = p.getValue().getAgendaMap();
    if (agendaMap.get(columnName) != null ) {
    columnData = (String) agendaMap.get(columnName);
    }
    System.out.println(“ColumnData: ” + columnData);
    return new SimpleStringProperty(columnData);
    }
    });

    I have dynamic column with “”Please enter the data” as text in all the rows. Now I edit one of the row with value “1234”. Then I drag and drop the row on another position , now all the rows have “1234” . I believe there is something wrong with my cellvalueFactory. Please let me know your views…

  6. these kind of post are always inspiring and i prefer to read quality content so i’m happy to find many good point here in the post, writing is simply great, thank you for the posthttp://www.creditocartao.net

  7. Pingback: Simple Drag&Drop-ListView for JavaFX 2.1 | skynet-gfx.de

  8. Pingback: Source Code : Draggable ListCell as FriendList Demo « Java and FX

  9. I get the error when I try to run any ideas?
    I am on a MAC using java 1.7.0_05, javafx2.2 beta build 18

    AutoFillTextBox is not a valid type.
    /Users/David/Desktop/FriendsList/build/classes/friendslist/GUIFX.fxml:23
    at javafx.fxml.FXMLLoader.createElement(FXMLLoader.java:2381)
    at javafx.fxml.FXMLLoader.processStartElement(FXMLLoader.java:2311)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2131)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2028)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2742)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2721)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2707)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2694)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2683)
    at friendslist.FriendsList.start(FriendsList.java:37)
    at com.sun.javafx.application.LauncherImpl$5.run(LauncherImpl.java:319)
    at com.sun.javafx.application.PlatformImpl$5.run(PlatformImpl.java:206)
    at com.sun.javafx.application.PlatformImpl$4.run(PlatformImpl.java:173)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:76)

  10. Hi David,

    It’s telling that you are using the AutoFillTextBox control which is not currently available in your GUIFX.fxml containing package. Please make sure that you have the package “np.com.ngopal.autocomplete” which contains the AutoFillTextBox control . Also make sure that you are importing the control inside GUIFX.fxml
    like below

    < ?import np.com.ngopal.autocomplete.* ?>

    Thanks

  11. Hi Narayan,

    Thank you for this useful class. Last week I tried to convert the functionality from ListCell to TableRow, and it worked perfect. Now, I’m trying to implement the ListCellX as you wrote. The ListView seems empty (no Strings on it) but it actually has the clickable elements in each Cell (I know because I print it in the output terminal). Do you have any solution for this view problem?

  12. Hi,

    could you post the imports used for the class ListCellX please? I cannot get it to work…

  13. Do you mind if I quote a few of your articles as long as I provide credit
    and sources back to your weblog? My blog site is in the exact same niche as yours and my visitors would certainly benefit from some of the
    information you provide here. Please let me know if
    this alright with you. Many thanks!

  14. Hi,

    Really nice article. I’ve found one problem though in JavaFX 2.2. The drag ‘n drop implementation behaves differently depending which platform you are using. In Windows, this example works great but when I run it in GNU/Linux it removes (I think) the selected item when you hover over another item in the list. Really strange. I’ve been troubleshooting for days why my application won’t work and then I tried it on windows and it runs without any problem. Really frustrating.

    Maybe someone else has experience the same issue?

  15. Hi there, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of
    spam responses? If so how do you reduce it, any
    plugin or anything you can suggest? I get so much lately it’s driving me crazy so any help is very much appreciated.

  16. Hi, I alyways get an java.lang.IllegalArgumentException: failed to parse:mycell Exception. Don’t know what is wrong..

  17. Hi,
    Your job look’s great. But I downloaded the source and I can’t import it, my ecplise doesn’t considere your code as a project. If I create a new project and I copy the sources, I have many errors (SkinBase not found, constructor BehaviorBase undefined…). Do you have any Idea why it doesn’t work ?

  18. Hello thanks for sharing your code that’s awesome!

    However I encounter a problem, whenever I drag an item form my list it gets duplicated. In other words the list expands. I still have not found where the bug is in your code.

    Kind regards,
    Xela 🙂

  19. Hi, Narayan —
    I’ve implemented your code, and it’s mostly working….
    I have one problem:

    If I have a list with 3 items, and move the 1st item to the 2nd position, The 1st and 2nd item display correctly, but the 3rd item does NOT show up.

    I’ve looked through the code (in the setOnDragEntered event handler), and the items list looks correct; it just seems like the last item is not displayed. (If you move an item to the last position, then all items will appear again.)

    Have you noticed this issue?

  20. Hi there,

    I implemented your code in my project as well, but the listView doesn’t show the text. So the items are there and I can drag and drop them but the text content is not visible…

Leave a Reply