Imran Imran - 2 months ago 7
Javascript Question

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

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

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>

Comments