Faites glisser et déposer dans Silisteur Spark

Question

J'essaie d'initier un glisser & déposer sur une liste d'étincelles afin que l'utilisateur peut ré-commander la liste manuellement. Le problème est le suivant: à chaque fois que je pose et dépose, l'entrée drop/dragged est dupliquée.

Mon application principale est:

<?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> 

Inclus comme fichier est:

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); 

} 

Et mon article renderer ressemble à:

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

La propriété qui permet de glisser/déposer dans le même composant (sans duplication) est: allowDragMove si la valeur est true, la duplication ne se produit pas.

Answer 2

@gpasse m'a mis sur la bonne voie.

Les champs suivants doivent être définis sur true pour une liste Spark dans Flex 4.6.

dragEnabled="true" 
dragMoveEnabled="true" 
dropEnabled="true"