Problem
Suppose you have displayed two lists of thumbnail images using GtkIconView, and you would like to allow users to drag and drop images between the two views.
In this Part 1, I'll show how to drag and drop images from left to right only. Also, in this example, the dropped images will be appended to the end of the dropped view. In Part 2, I'll show you how to insert image at the dropped location.
Solution
- First, display the thumbnail images using the method as outlined in How to display a list of thumbnail images using GtkIconView?
- Then add the drag-and-drop support with the technique as described in the article How to drag and drop between 2 GtkTreeViews - Part 1 - left to right?
- Note that this example is very similar to that of How to select thumbnail images with drag and drop using GtkIconView - Part 1 - left to right?
Sample Code
The following image files are required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.
square_red.jpg | |
square_yellow.jpg | |
square_green.jpg | |
square_blue.jpg | |
square_blue2.jpg | |
square_blue3.jpg | |
ball_red.png | |
ball_yellow.png | |
ball_blue3.png | |
ball_blue3a.png | |
ball_green3.png | |
ball_green4.png |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 19 20 23 24 25 26 27 28 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 52 55 56 57 58 59 61 62 63 65 66 67 68 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 88 90 91 92 93 94 95 96 106 107 108 110 111 112 113 114 115 116 118 119 120 121 123 125 126 128 129 130 | <?php $window = new GtkWindow(); $window->set_size_request(600, 400); $window->connect_simple('destroy', array('Gtk','main_quit')); $window->add($vbox = new GtkVBox()); // display title $title = new GtkLabel("Drag and drop between two thumbnail images using GtkIconView\n". " Part 1 - Left to right (append)"); $title->modify_font(new PangoFontDescription("Times New Roman Italic 10")); $title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff")); $title->set_size_request(-1, 40); $vbox->pack_start($title, 0, 0); $vbox->pack_start(new GtkLabel(), 0, 0); // add a small gap // Set up the two views $hpane = new GtkHPaned(); $vbox->pack_start($hpane); // the thumbnail image lists // 0 = left // 1 = right $imagelist[0] = array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg', 'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg'); $imagelist[1] = array('ball_red.png', 'ball_yellow.png', 'ball_blue3.png', 'ball_blue3a.png', 'ball_green3.png', 'ball_green4.png',); $left_vbox = setup_iconview(0, 'left'); // note 1 $right_vbox = setup_iconview(1, 'right'); // note 1 // setup drag and drop $view[0]->drag_source_set(Gdk::BUTTON1_MASK, array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE); $view[0]->connect('drag-data-get', 'on_drag'); $view[1]->drag_dest_set(Gtk::DEST_DEFAULT_ALL, array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE); $view[1]->connect('drag-data-received', 'on_drop'); $hpane->add1($left_vbox); $hpane->add2($right_vbox); $view[0]->set_size_request(300, -1); $window->show_all(); Gtk::main(); function setup_iconview($id, $label) { // note 1 global $imagelist, $model, $modelfilter, $view; $model[$id] = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING); foreach($imagelist[$id] as $img) { $pixbuf = GdkPixbuf::new_from_file($img); $model[$id]->append(array($pixbuf, $img)); } $view[$id] = new GtkIconView($model[$id]); $view[$id]->set_pixbuf_column(0); // col 0 of the model $view[$id]->set_text_column(1); // col 1 of the model $view[$id]->set_selection_mode(Gtk::SELECTION_MULTIPLE); $view[$id]->set_columns(0); $view[$id]->set_item_width(120); $vbox = new GtkVBox(); $scrolled_win = new GtkScrolledWindow(); $scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC, Gtk::POLICY_AUTOMATIC); $vbox->pack_start($scrolled_win); $scrolled_win->add($view[$id]); return $vbox; } // process drag function on_drag($widget, $context, $data, $info, $time) { $selection = $widget->get_selected_items(); if (count($selection)==0) return; // return if there's no selection $data->set_text(serialize($selection)); // note 2 } // process drop function on_drop($widget, $context, $x, $y, $data, $info, $time) { // append the dragged item to the destination view global $imagelist; global $model, $modelfilter, $view; $data = unserialize($data->data); $dest_model = $widget->get_model(); $source_model = $view[0]->get_model(); foreach($data as $img) { $i = $img[0]; // remove the source image first $iter = $model[0]->get_iter($i); $img_name = $model[0]->get_value($iter, 1); $model[0]->remove($iter); // note 3 // append the dragged image to the destination $pixbuf = GdkPixbuf::new_from_file($img_name); $dest_model->append(array($pixbuf, $img_name)); // note 4 } } ?> |
Output
As shown above.
Explanation
This example make use of the code from the article How to drag and drop between 2 GtkTreeViews - Part 1 - left to right? and How to display a list of thumbnail images using GtkIconView?
What's new here:
- Note how we set up two thumbnail image views with just one function.
- Copy the dragged image.
- Remove the source image first.
- Now append the dragged image to the end of the dropped view.
Related Links
- How to drag and drop between two thumbnail images using GtkIconView - Part 2 - left to right insert?
- How to drag and drop between two thumbnail images using GtkIconView - Part 3 - both directions with insert?
- How to display a list of thumbnail images using GtkIconView?
- How to select thumbnail images with drag and drop using GtkIconView - Part 1 - left to right?
- How to select thumbnail images with drag and drop using GtkIconView - Part 2 - in both directions?
- How to drag and drop between 2 GtkTreeViews - Part 1 - left to right?
- How to drag and drop between 2 GtkTreeViews - Part 2 - in both directions?
Read more...