Angularjs ui可排序 - 替換已丟棄項目的內容

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>