Drag &drop

Yii 1.1 General Discussion
1

Hi i have a page witn a dropdownlist and on rights i have some elements draggable , when i select an element fo the list, with ajax ,i insert element droppable in a div but if i drag a draggable elements in a droppable dont work …

This is the ajax page





<div class="row-fluid">

	<div class="span11">

	<div class="form">




<?php  


    $form=$this->beginWidget('CActiveForm', array(

	'id'=>'my-form',

	'enableClientValidation'=>true,

	

	)); 

?>

	<div class="row">

		<?php echo $form->labelEx($model,' Seleziona il modulo'); ?>

		<?php echo $form->dropDownList($model,'modulo',array(

            														 

            														 '442'=>'4-4-2',

            														 '433'=>'4-3-3',

                                                                     '541'=>'5-4-1',

                                                                     '343'=>'3-4-3',

                                                                     '352'=>'3-5-2',

                                                                     

                                                                    

																	 ),array(

                            'ajax' => array(

                            'type' => 'POST',

                            'url' => CController::createUrl('site/updateAjax'),

                            'update' => '#data',

                            'data'=>array('modul'=>'js:this.value'),


                        ),'prompt' => 'seleziona il modulo...'

                  ));  ?>

				

	</div>

</div>





<?php $this->endWidget(); ?>

		

		<div id="data">

		 

		</div>

		

		

</div>


	<div class="span1">

	<?php 

		// this view is displayed for each item

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

		 'id' => 'goalkeeper1',

		 'options' => array(

		  'cursor'=>'move',

		  

		  

		  ),

		 'htmlOptions'=>array(

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

	       ),

		));

		echo '<h6>Goalkeeper1</h6>';

		$this->endWidget();





	 ?>


	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Goalkeeper2';


		$this->endWidget();

	?>


	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender1';


		$this->endWidget();

	?>

	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender2';


		$this->endWidget();

	?>




	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender3';


		$this->endWidget();

	?>

	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender4';


		$this->endWidget();

	?>


		<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender5';


		$this->endWidget();

	?>

	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender6';


		$this->endWidget();

	?>




	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender7';


		$this->endWidget();

	?>

	<?php  

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

		    // additional javascript options for the draggable plugin

		    'options'=>array(

		        'scope'=>'myScope',

		    ),

		));

		    echo 'Defender8';


		$this->endWidget();

	?>

		

	</div>


</div>

this is a renderpartial (with ajax go in div with id=data):




<div class="row-fluid">

	<div class=" offset4 span4 offset4 text-center">


		<?php

			//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!")}', 

			                 'revert'=>'true',

			        ),

			        'htmlOptions'=>array( //stile css

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

			                'tolerance'=>'pointer',

			        )

			));

			echo '<h4>Portiere</h4>';


			$this->endWidget();

			?>

	</div>

</div>

<div class="row-fluid">

	<div class="span12 text-center">

		<?php

		//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!")}', 

		                 'revert'=>'true',

		        ),

		        'htmlOptions'=>array( //stile css

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

		                'tolerance'=>'touch',

		        )

		));

		echo 'terzino dx';


		$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:

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

		        ),

		        'htmlOptions'=>array( //stile css

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

		                'tolerance'=>'touch',

		        )

		));

		echo 'centrale dx';


		$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:

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

		        ),

		        'htmlOptions'=>array( //stile css

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

		                'tolerance'=>'touch',

		        )

		));

		echo 'centrale sx';


		$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:

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

		        ),

		        'htmlOptions'=>array( //stile css

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

		                'tolerance'=>'touch',

		        )

		));

		echo 'terzino sx';


		$this->endWidget();


		?>

	</div>

</div>

<?php

//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:150px;height:40px;background:#EEFFEE;margin:10px;',

                'tolerance'=>'touch',

        )

));

echo 'centrocampista esterno dx';


$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:

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

        ),

        'htmlOptions'=>array( //stile css

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

                'tolerance'=>'touch',

        )

));

echo 'centrocampista dx';


$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:

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

        ),

        'htmlOptions'=>array( //stile css

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

                'tolerance'=>'touch',

        )

));

echo 'centrocampista sx';


$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:

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

        ),

        'htmlOptions'=>array( //stile css

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

                'tolerance'=>'touch',

        )

));

echo 'centrocampista esterno sx';


$this->endWidget();

?>

<div class="row-fluid">

	<div class="offset1 span5 text-center">

		<?php  

		//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'=>'width:150px;height:40px;background:#EEFFEE;margin:10px;',

		                'tolerance'=>'touch',

		        )

		));

		echo 'attaccante dx';


		$this->endWidget();

		?>

	</div> 

	<div class="span5  text-center">

		<?php

		//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'=>'width:150px;height:40px;background:#EEFFEE;margin:10px;',

		                'tolerance'=>'touch',

		        )

		));

		echo 'attaccante sx';


		$this->endWidget();

	 	?>

	</div>

</div>
2

Can someone helpme ?

3

The problem was ajax , when i dont refresh the page and put object in the page ,if i open the page’s source i dont have the object inserted with ajax …

Now i must take the value of a droppable ,for example if i put paul brown in the droppable with id=goalkeeper how i can save this in a php variable ?