Angularjs ui sortable - 替換掉落項目的內容

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'
            }]
        }
    }
    ];
};

這是一個拖放示例。 被拖動的元素之一將插入column數組中。

我的問題：

我只想在column數組中添加“content_to_drop”對象，而不是添加整個對象。 這樣做有可能嗎？

為了更好看： https ： //jsfiddle.net/ssftkp96/

Answer 1

您可以執行以下操作：

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

或者，如果您希望放置目標只有一個對象，則必須以數組的形式提供它：

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>