Drag & Drop

International Italian
1

Salve avrei bisogno di creare un drag & drop , ho 5 numeri che devo inserire in 5 riquadri , ho vito il widjet :




 $this->beginWidget('zii.widgets.jui.CJuiDroppable', array(

    'options'=>array(

        'drop'=>'js:function(event,ui){$(this).html("Dropped!")}',

    ),

    'htmlOptions'=>array(

        'style'=>'width: 150px; height: 150px; padding: 5px; border: 1px solid #fad42e; background: #fcefa1;',

    ),

));

    echo 'Drop here';

$this->endWidget();

Che crea un rettangolo in cui andrebbe messo un altro rettangolo allora ho inserito anche




$this->beginWidget('zii.widgets.jui.CJuiDraggable',array(

    // additional javascript options for the draggable plugin

    'options'=>array(

        'scope'=>'myScope',

    ),

));

    echo 'Spostami';

$this->endWidget();

Di fatto però non riesco a catturare il drop e inoltre vorrei che a seconda del quadrato in cui inserisco il numero dovrei inserire dati nel db .

Come mi devo muovere?

Grazie

2

Ho risolto questa piccola parte , ma sono solo all’inizio :




<?php

//Oggetto spostbile (draggable) 

$this->beginWidget('zii.widgets.jui.CJuiDraggable',

        array(

                'htmlOptions'=>array( //stile css

                        'style'=>'float:left;width:50px;height:50px;margin:10px;',

                ),

        ));

echo '5';

$this->endWidget();


//Oggetto su cui inserire  (dropzone)

$this->beginWidget('zii.widgets.jui.CJuiDroppable', array(

        'options'=>array(

                'drop'=>'js:function( event, ui ) {$(this).html("Inserito!")}', //remember put js:

        ),

        'htmlOptions'=>array( //stile css

                'style'=>'float:left;width:100px;height:100px;background:#EEFFEE;margin:10px;',

        )

));

echo 'Inserisci un numero';


$this->endWidget();


?>

Riesco a far mettere il numero e all’inserimento la scritta cambia.Sono solo all’inizio …

1: E’ possibile rendere non permanente questo funzionamento , cioà che quando ritrascino fuori il numero ritorni alla condizione iniziale?

Risolto in parte :

Homodificato la parte droppable così :




//Oggetto su cui inserire (dropzone)

$this->beginWidget('zii.widgets.jui.CJuiDroppable', array(

        'options'=>array(

                'drop'=>'js:function( event, ui ) {$(this).html("Inserito!")}', //remember put js:

                'out'=>'js:function( event, ui ) {$(this).html("Uscito!")}', 

        ),

        'htmlOptions'=>array( //stile css

                'style'=>'float:left;width:100px;height:100px;background:#EEFFEE;margin:10px;',

        )

));

echo 'Inserisci un numero';

Di fatto però non funziona benissimo ,cioè non funziona su tutta l’area ma solo su alcune parti…

Sarebbe possibile avere un effetto calamita che attira il numero in una determinata posizione?

2: Nel mio esempio in alto ho 5 caselle nelle quali devo inserire 5 numeri , è possibile tracciare quale numero è stato inserito in una determinata casella ,per poter essere sfruttato ad esempio per un inserimento in un db ?

3: ho creato un form con un solo campo dropDownList che mi fa scegliere la disposizione delle caselle , vorrei con ajax in base alla scelta disporre le caselle in modo diverso … E’ possibile ?

Grazie per ora