python pygame - how to create a drag and drop with multiple images?

Question

So I've been trying to create a jigsaw puzzle using pygame in python.The only problem is that I'm having trouble creating the board with multiple images that i can drag along the screen (no need to connect the images like a puzzle what so ever just a simple drag and drop). I'm loading my images from a local folder on my computer. Can someone please help me?

This is what i have tried so far but the images start at the same postion and pygame recognize them all as one image

import socket
import os
import shutil
import pygame
from pygame.locals import*



def dragdrop(path):
    dirs = os.listdir(path)
    def load_image(name, colorkey=None):
        fullname=os.path.join("data", name)
        try:
            image=pygame.image.load(fullname)
        except pygame.error, message:
            print "Impossible de charger l'image:",name
            raise SystemExit, message
        image = image.convert()
        if colorkey is not None:
            if colorkey is -1:
                colorkey = image.get_at((0, 0))
            image.set_colorkey(colorkey, RLEACCEL)
        return image, image.get_rect()

    class Ichrom(pygame.sprite.Sprite):
        def __init__(self,image,initpos):
            pygame.sprite.Sprite.__init__(self)
            self.pos = initpos
            self.image, self.rect=image
            self.button=(0,0,0)#mouse buttons not pressed
            self.selected = 0
            self.mouseover=False
            self.focused=False
            print "init chrom at ",self.pos

        def rollover(self):
            """Test if the mouse fly over the chromosome 
            self.mouseover==True if mouse flying over the chrom,
            False if not"""
            mpos=pygame.mouse.get_pos()#mouseposition
            #test if mouse roll over the sprite
            if self.rect.collidepoint(mpos):
                self.mouseover=True
            else:
                self.mouseover=False
        def update(self):
            self.button=pygame.mouse.get_pressed()
            mpos = pygame.mouse.get_pos()
            self.selected=self.rect.collidepoint(mpos)
            #the mouse flies over a chromosome
            if (self.mouseover):
                #print "mouse pos:",mpos
                if self.button==(1,0,0):     # )  
                    pos = pygame.mouse.get_pos()
                    self.rect.midtop = pos

    def main():
        pygame.init()
        screen = pygame.display.set_mode((1000,1000))
        pygame.display.set_caption("Karyotyper")
        pygame.mouse.set_visible(True)

        background = pygame.Surface(screen.get_size())
        background = background.convert()
        background.fill((0, 0, 0))

        screen.blit(background,(0, 0))
        pygame.display.flip()


        """i1=load_image('C:/Users/Yonatan/Desktop/House.png', -1)
        i2=load_image('C:/Users/Yonatan/Desktop/US.jpeg', -1)
        i3=load_image('C:\Users\Yonatan\Desktop\imgres.jpg', -1)
        fuck= [i1, i2, i3]"""

        img=[]
        count=0
        for i in dirs:

            spr = Ichrom(load_image(path + "/" +i,-1),(count,count))
            count = count+30
            img.append(spr)

        allsprites = pygame.sprite.RenderPlain((fck))
        clock = pygame.time.Clock()

        while 1:
            clock.tick(60)
            for event in pygame.event.get():
                if event.type == QUIT:
                    return
                elif event.type == KEYDOWN and event.key == K_ESCAPE:
                    return
                if event.type ==pygame.MOUSEBUTTONDOWN:
                    #need to be modified to handle a list of chromosomes
                    for i in fck:
                        i.rollover()
            allsprites.update()
            screen.blit(background,(0,0))
            allsprites.draw(screen)
            pygame.display.flip()

    main()

Answer 1

You pass a position to your sprites and store it in self.pos, but to draw a Sprite a sprite group uses the rect attribute:

From pygame.sprite.Group.draw():

Draws the contained Sprites to the Surface argument. This uses the Sprite.image attribute for the source surface, and Sprite.rect for the position.