Locate each alphabet to each answer container but not to add new answer container - drag and drop using AngularJs

Question

I need to put each alphabet to each answer container not to add new answer container. See my snippet. How I can do that?

var myApp = angular.module('myApp',['ngDragDrop']).controller('QuestionDetailsCtrl', function ($scope) {
  
  //Scrabble word
    $scope.ObjListAlphabet = [{alphabet: "J"},{alphabet: "L"},{alphabet: "W"},{alphabet: "E"},{alphabet: "B"},{alphabet: "A"},{alphabet: "T"},{alphabet: "U"}];
    $scope.ObjAnswerList = [
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""}
                            ];
                            
    $scope.list1 = {title: 'AngularJS - Drag Me'};
    $scope.list2 = {};
  
  });

.scrabble
{
    display: inline !important;
    text-align: center !important;
    width:40px;
    height:40px;
    background-color:#ccc;
    border:1px solid #ccc;
    margin:2px;
    float:left;
    text-align:center;
    padding-top:8px;
    margin-right:10px;
}
.alphabet-scrabble
{
     float: left;
     color: white;
     background-color: #3636ff;
     margin: 2px;
     width: 38px;
     height: 38px;
     padding: 8px 14px 8px 12px;
     font-size: 1.3em;
     cursor: pointer;
     text-align: center;
}

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

    <script>$('#widget').draggable();</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://pencil.my/assets/js/angular-dragdrop.js"></script>
<div ng-app="myApp" ng-controller="QuestionDetailsCtrl">
Rajah di bawah menunjukkan sebuah seterika elektrik.
<div class="text-center">
    <img src="http://images.clipartpanda.com/iron-clipart-iron.gif" style="width:200px; margin-left:auto; margin-right:auto; transform:rotate(110deg); margin-top: 35px;" />
</div>
<br/>
Apakah bentuk tenaga yang dihasilkan oleh seterika elektrik di atas.
  <br/>
<br/><br/>
Tenaga Elektrik <i class="ion-arrow-right-c"></i> Tenaga ________
<br/><br/>
{{ObjAnswerList}}
<br/>
  <br/>
   Answer Container:
   <br/>
<div style="width:100%; text-align:center;">
    <div class="scrabble" ng-repeat="ObjAnswer in ObjAnswerList" data-drop="true" data-jqyoui-options ng-model="ObjAnswerList" jqyoui-droppable>
        {{ObjAnswer.alphabet}}
        <div data-drag="true" data-jqyoui-options ng-model="ObjAnswerList" jqyoui-draggable ng-hide="!ObjAnswer.Ans">{{ObjAnswer.Ans}}</div>
    </div>
</div>
<br/><br/><br/>

<hr/>

<div class="answer-alphabet">
    <div data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model ="ObjAlphabet" jqyoui-draggable="{animate:true}" ng-hide="!ObjAlphabet.alphabet" class="alphabet-scrabble" ng-repeat="ObjAlphabet in ObjListAlphabet">
        {{ObjAlphabet.alphabet}}
    </div>
</div>
</div>

Answer 1

Hey Imran, Here you go..............

 var myApp = angular.module('myApp',['ngDragDrop']).controller('QuestionDetailsCtrl', function ($scope) {

  //Scrabble word
    $scope.ObjListAlphabet = [{alphabet: "J"},{alphabet: "L"},{alphabet: "W"},{alphabet: "E"},{alphabet: "B"},{alphabet: "A"},{alphabet: "T"},{alphabet: "U"}];
    $scope.ObjAnswerList = [
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""},
                                {alphabet: ""}
                            ];

    $scope.list1 = {title: 'AngularJS - Drag Me'};
    $scope.list2 = {};
       
  });

.scrabble
{
    display: inline !important;
    text-align: center !important;
    width:40px;
    height:40px;
    background-color:#ccc;
    border:1px solid #ccc;
    margin:2px;
    float:left;
    text-align:center;
    padding-top:8px;
    margin-right:10px;
}
.alphabet-scrabble
{
     float: left;
     color: white;
     background-color: #3636ff;
     margin: 2px;
     width: 38px;
     height: 38px;
     padding: 8px 14px 8px 12px;
     font-size: 1.3em;
     cursor: pointer;
     text-align: center;
}

 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<script>$('#widget').draggable();</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://pencil.my/assets/js/angular-dragdrop.js"></script>
<div ng-app="myApp" ng-controller="QuestionDetailsCtrl">
    Rajah di bawah menunjukkan sebuah seterika elektrik.
    <div class="text-center">
        <img src="http://images.clipartpanda.com/iron-clipart-iron.gif" style="width:200px; margin-left:auto; margin-right:auto; transform:rotate(110deg); margin-top: 35px;" />
    </div>
    <br />
    Apakah bentuk tenaga yang dihasilkan oleh seterika elektrik di atas.
    <br />
    <br /><br />
    Tenaga Elektrik <i class="ion-arrow-right-c"></i> Tenaga ________
    <br /><br />
    {{ObjAnswerList}}
    <br />
    <br />
    Answer Container:
    <br />
    
    <div style="width:100%; text-align:center;">
        <div ng-repeat="ObjAnswer in ObjAnswerList">
            <div class="scrabble" data-drop="true" ng-model="ObjAnswerList" jqyoui-droppable="{index: {{$index}}}">
                <div data-drag="true" data-jqyoui-options ng-model="ObjAnswerList" ng-show="ObjAnswerList[$index].alphabet">{{ObjAnswer.alphabet}}</div>
            </div>
        </div>
    </div>
    <br /><br /><br />

    <hr />

    <div class="answer-alphabet">
        <div data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="ObjAlphabet" jqyoui-draggable="{animate:true}" ng-hide="!ObjAlphabet.alphabet" class="alphabet-scrabble draggable" ng-repeat="ObjAlphabet in ObjListAlphabet">
            <div class="label label-success" data-drag="{{ObjAlphabet.alphabet}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="ObjListAlphabet" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}">{{ObjAlphabet.alphabet}}</div>
        </div>
    </div>
</div>

Answer 2

One of the way is to initialize a variable.Pass the draggable content to it.Parse the json where you want to add it using JSON.parse(yourjson); Now push the variable to the json. Finally Stringify the json.Like this -

                         var vario = /*variableyoutoinsert*/ 
                         var jsonstring = /*your json*/
                         var obj = JSON.parse(json);
                         obj.push.vario;
                         jsonstring = JSON.stringify(obj);