[solved] Drag and Drop

Yii 1.1 General Discussion
1

Hi guys,

i have a list with some items and i want to drag and drop them on slots. I have built it like this:




// this view is displayed for each item

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

 'id' => 'inv_' . $data->id,

 'options' => array(

  'scope' => $data->item->type->class,

  'revert' => 'invalid',

  'snap' => true,

  ),

));

echo CHtml::image($data->item->image, 'item image', array('height' => 72, 'width' => 72));

$this->endWidget();


// the slots are displayed like this:

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

 'id' => 'slot1',

 'options' => array(

  'scope'=>'class1',

 ),

));


if ($model->slot1_id != 0)

{

 echo CHtml::image($model->slot1->image, 'item image', array('height' => 96, 'width' => 96));

}

else

{

 echo CHtml::image('empty.jpg', 'not equipped', array('height' => 96, 'width' => 96));

}

$this->endWidget();


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

 'id' => 'slot2',

 'options' => array(

  'scope'=>'class2',

 ),

));

...

on the bottom of the page this js code is registered:




/*<![CDATA[*/jQuery(function($) 

{jQuery('#slot1').droppable({'scope':'class1'});

jQuery('#slot2').droppable({'scope':'class2'});

jQuery('#yw0').yiiListView({'ajaxUpdate':['yw0'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter'});

jQuery('#inv_1').draggable({'scope':'class1','revert':'invalid','snap':true});

jQuery('#inv_3').draggable({'scope':'class1','revert':'invalid','snap':true});

jQuery('#inv_2').draggable({'scope':'class1','revert':'invalid','snap':true});

jQuery('#yw4').yiiListView({'ajaxUpdate':['yw4'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter'});

jQuery('#inv_4').draggable({'scope':'class2','revert':'invalid','snap':true});

jQuery('#inv_5').draggable({'scope':'class3','revert':'invalid','snap':true});

jQuery('#inv_8').draggable({'scope':'class4','revert':'invalid','snap':true});

jQuery('#inv_7').draggable({'scope':'class5','revert':'invalid','snap':true});

jQuery('#inv_6').draggable({'scope':'class5','revert':'invalid','snap':true});

jQuery('#yw10').yiiListView({'ajaxUpdate':['yw10'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter'});

jQuery('#inv_9').draggable({'scope':'class6','revert':'invalid','snap':true});

jQuery('#yw12').tabs({'collapsible':true});});/*]]>*/

I can drag the item images, but not drop them onto their slots. I have already tried to hard code the same scope=‘MyScope’ for all drag / drop widgets, but same problem.

Do you have any hints for me?

TIA

Marco

2

Just a follow up for the interested…

Problem had to do with the draggable divs (size probably). After adding a float:left, dragging and dropping worked well.

Then i encountered the next problem, how to work in the controller with the dragged items. After digging around for quite a long time i worked out this solution:




// view

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

 'id' => 'slot1',

 'options' => array(

  'scope'=>'class1',

  'drop' => 'js:function(event, ui){

         $.ajax({

	        type: "POST",

		url: "'.Yii::app()->createUrl('controller/itemStoreAjax').'",

		data:{dragged_id:ui.draggable[0].id, dropped_id: this.id },

                success: function(msg){

                            $("#result").html(msg);

          }})}'

 ),

));


if ($model->slot1_id != 0)

{

 echo CHtml::image($model->slot1->image, 'item image', array('height' => 96, 'width' => 96));

}

else

{

 echo CHtml::image('empty.jpg', 'not equipped', array('height' => 96, 'width' => 96));

}

$this->endWidget();

echo "<br/>";

echo "<div id='result'>No Result</div>";


// controller

public function actionItemStoreAjax()

{

    echo CHtml::encode(print_r($_POST, true));

}

So there is the connection working with drag and drop and the controller action…