added event afterDropRow

Author: Eugene Tupikov

CHANGELOG.md

@@ -7,6 +7,8 @@ Yii2 multiple input change log
 - #228 added `iconMap` and `iconSource`property for MultipleInput and TabularInput
 - #228 changed the following methods to support icon class:
     BaseColumn->renderDragColumn(), TableRenderer->renderCellContent(), BaseRenderer->prepareButtons()
+- #194 added support of yii\base\DynamicModel
+- #186 added event `afterDropRow`
 
 2.15.0
 =======================

examples/views/multiple-input.php

@@ -49,6 +49,7 @@
 echo $form->field($model, 'schedule')->label(false)->widget(MultipleInput::className(), [
     'id' => 'examplemodel-schedule',
     'max' => 4,
+    'sortable' => true,
     'allowEmptyList' => true,
     'rowOptions' => function($model) {
         $options = [];
@@ -170,6 +171,8 @@
         }).on('afterDeleteRow', function(e, item){       
             console.log('calls on after remove row event');
             console.log('User_id:' + item.find('.list-cell__user_id').find('select').first().val());
+        }).on('afterDropRow', function(e, item){       
+            console.log('calls on after drop row', item);
         });
 JS;
 

src/assets/src/js/jquery.multipleInput.js

@@ -52,7 +52,15 @@
          * where event is an Event object.
          *
          */
-        afterDeleteRow: 'afterDeleteRow'
+        afterDeleteRow: 'afterDeleteRow',
+
+        /**
+         * afterDropRow event is triggered after drop the row in sortable mode.
+         * The signature of the event handler should be:
+         *     function (event, row)
+         * where event is an Event object and row is html container of dragged row
+         */
+        afterDropRow: 'afterDropRow'
     };
 
     var defaultOptions = {

src/assets/src/js/jquery.multipleInput.min.js

@@ -395,7 +395,22 @@ public function render()
 
         if($this->sortable) {
             MultipleInputSortableAsset::register($view);
-            $js .= "$('#{$this->id} table').sorting({containerSelector: 'table', itemPath: '> tbody', itemSelector: 'tr', placeholder: '<tr class=\"placeholder\"/>', handle:'.drag-handle'});";
+            $js .= <<<JS
+                $('#{$this->id} table').sorting({
+                    containerSelector: 'table',
+                    itemPath: '> tbody', 
+                    itemSelector: 'tr', 
+                    placeholder: '<tr class="placeholder">',
+                    handle:'.drag-handle',
+                    onDrop: function(item, container, _super, event) {
+                        _super(item, container, _super, event);
+                        
+                        var wrapper = item.closest('.multiple-input').first();
+                        event = $.Event('afterDropRow');
+                        wrapper.trigger(event, [item]);
+                    }
+                });
+JS;
         }
 
         $view->registerJs($js);