Drag and Drop in Spark tilelist

Question

I am trying to initiate a drag&drop on a spark tilelist so the user can re-order the list manually. The problem is : each time i drap and drop, the dropped/dragged entry is duplicated.

My main application is :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
initialize="initApp()">
<fx:Script source="com/init.as" />
</s:Application>

Included as file is :

import com.Sequence;

import mx.collections.ArrayCollection;
import mx.core.ClassFactory;
import mx.core.FlexGlobals;

import spark.components.List;
import spark.layouts.TileLayout;

public var main:List=new List()
public var ok: ArrayCollection = new ArrayCollection( [
    {label:"1-redblue", data:"redblue"},
    {label:"2-ncview", data:"ncview"},
    {label:"3-greyscale", data:"greyscale"},
    {label:"4-alg2", data:"alg2"},
    {label:"5-alg", data:"alg"},
    {label:"6-occam", data:"occam"},
    {label:"7-rainbow", data:"rainbow"},
    {label:"8-sst_36", data:"sst_36"},
    {label:"9-occam_pastel-30", data:"occam_pastel-30"},
    {label:"10-ferret", data:"ferret"}
]);

// ActionScript file
public function initApp(){

    var lay:TileLayout=new TileLayout()
    var ae:ClassFactory=new ClassFactory(Sequence)

    main.layout=lay
    main.dataProvider=ok    
    main.dragEnabled=true   
    main.dropEnabled=true
    main.width=FlexGlobals.topLevelApplication.width    
    main.height=FlexGlobals.topLevelApplication.height  
    main.itemRenderer=ae

    this.addElement(main);

}

And my item renderer looks like :

package com
{
    import mx.controls.TextArea;
    import mx.events.FlexEvent;

    import spark.components.BorderContainer;
    import spark.components.supportClasses.ItemRenderer;

    public class Sequence extends ItemRenderer
    {
        private var borderC:BorderContainer=new BorderContainer()
        private var labeli:TextArea=new TextArea()
        private var d:Object

        public function Sequence()
        {
            super();
            this.addElement(borderC)
            this.addEventListener(FlexEvent.CREATION_COMPLETE,doIT)
            borderC.width=borderC.height=100
            labeli.width=labeli.height=100
            borderC.addElement(labeli)

        }

        override public function set data(d:Object):void{
            this.d=d
        }

        override public function get data():Object{
            return d;
        }

        private function doIT(e:FlexEvent):void{
            labeli.text =String(d.label);
        }

    }
}

Answer 1

The property that allows to drag/drop within the same component (without duplicating) is : allowDragMove if set to true, the duplication does not occurs.