Angularjs ui sortable - Replace content of dropped item

Question

  <div ui-sortable="sortableSection" ng-model="mainInputs" class="first">
    <div ng-repeat="(i, input) in mainInputs | orderBy: input.type">
      <div class="alert alert-success rounded gradient" >{{ input.text }}</div>
    </div>
  </div>

    <div ui-sortable="sortableSection" ng-model="column" class="connected-apps-container" style="min-height: 40px;">
 place your elements here
    </div>

var mainInputs = function(){
    return [
    {
        type: 'radio',
        text: 'Radio group',
        "content_to_drop": {
            type: 'radio',
            contents: [{
                text: 'radio 1',
                value: '1'
            },{
                text: 'radio 2',
                value: '2'
            },{
                text: 'radio 3',
                value: '3'
            }]
        }
    },
    {
        type: 'checkbox',
        text: 'Checkbox Input',
        "content_to_drop": {
            type: 'checkbox',
            contents: [{
                text: 'checkbox 1',
                value: '1'
            },{
                text: 'checkbox 2',
                value: '2'
            },{
                text: 'checkbox 3',
                value: '3'
            }]
        }
    }
    ];
};

This is a Drag and drop example. One of the elements being dragged will be inserted inside column array.

My problem:

Instead of adding the whole object, I just only want the "content_to_drop" object to be added inside the column array. Is there any possibility of doing this?

For a better look: https://jsfiddle.net/ssftkp96/

Answer 1

You can do the following:

var newObj = jQuery.extend({}, ui.item.sortable.model.content_to_drop); // clone    
$scope.column.push(newObj);

Or if you want the drop target to only have a single object you must provide it in the form of an array:

var newObj = jQuery.extend({}, ui.item.sortable.model.content_to_drop);     
$scope.column = [newObj]; 

var myApp = angular.module('myApp', ['ui.sortable']);

myApp.controller('MainCtrl', function($scope) {

  $scope.mainInputs = [];
  $scope.column = [];

  var mainInputs = function() {
    return [{
      type: 'radio',
      text: 'Radio group',
      content_to_drop: {
        type: 'radio',
        contents: [{
          text: 'radio 1',
          value: '1'
        }, {
          text: 'radio 2',
          value: '2'
        }, {
          text: 'radio 3',
          value: '3'
        }]
      }
    }, {
      type: 'checkbox',
      text: 'Checkbox Input',
      content_to_drop: {
        type: 'checkbox',
        contents: [{
          text: 'checkbox 1',
          value: '1'
        }, {
          text: 'checkbox 2',
          value: '2'
        }, {
          text: 'checkbox 3',
          value: '3'
        }]
      }
    }];
  };

  $scope.mainInputs = mainInputs();

  $scope.sortableSection = {
    connectWith: ".connected-apps-container",
    update: function(event, ui) {
      if ( // ensure we are in the first update() callback
        !ui.item.sortable.received &&
        // check that it's an actual moving between the two lists
        ui.item.sortable.source[0] !== ui.item.sortable.droptarget[0]) {
        ui.item.sortable.cancel(); // cancel drag and drop

        var newObj = jQuery.extend({}, ui.item.sortable.model.content_to_drop);
        $scope.column.push(newObj);
        // Or for a single object in the drop target, it must be provided as an Array:
        //$scope.column = [newObj]; 
      }
    }
  };
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <div class="col-lg-2 col-md-2 col-sm-3 panel panel-default svd_toolbox">
      <div ui-sortable="sortableSection" ng-model="mainInputs" class="first">
        <div ng-repeat="(i, input) in mainInputs | orderBy: input.type">
          <div class="alert alert-success rounded gradient">{{ input.text }}</div>
        </div>
      </div>
    </div>
    <div class="co-lg-10 well well-sm">
      <div ui-sortable="sortableSection" ng-model="column" class="connected-apps-container" style="min-height: 40px;">
        place your elements here
      </div>
    </div>
    <pre>{{ column | json }}</pre>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.17.0/sortable.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>