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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;