将每个字母定位到每个答案容器，但不要添加新的答案容器 - 使用 AngularJs 拖放
Posted
技术标签:
【中文标题】将每个字母定位到每个答案容器，但不要添加新的答案容器 - 使用 AngularJs 拖放【英文标题】：Locate each alphabet to each answer container but not to add new answer container - drag and drop using AngularJs 【发布时间】：2017-01-28 03:59:28 【问题描述】：我需要将每个字母表放入每个答案容器中，而不是添加新的答案容器。看我的sn-p。我该怎么做？
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>【问题讨论】：
【参考方案1】：嘿，伊姆兰，给你.......
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>【讨论】：
我能给你什么？ blog.***.com/2010/06/improvements-to-bounty-system供您参考 :) 那么您还有其他问题吗？ ***.com/questions/39613372/… Imran 一个问题.. 字母表一旦放入盒子就不能修改？【参考方案2】：其中一种方法是初始化一个变量。将可拖动的内容传递给它。使用 JSON.parse(yourjson); 解析要添加它的 json； 现在将变量推送到 json。 最后把json串起来。像这样-
var vario = /*variableyoutoinsert*/
var jsonstring = /*your json*/
var obj = JSON.parse(json);
obj.push.vario;
jsonstring = JSON.stringify(obj);
【讨论】：
如果您可以在 sn-p 中进行操作，那就太好了..感谢您的评论。 这里是多个容器拖放的链接marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/…你可以看到，你需要在“ObjAnswerList”中将索引加一，然后将元素添加到列表中以上是关于将每个字母定位到每个答案容器，但不要添加新的答案容器 - 使用 AngularJs 拖放的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Jquery 或 Javascript 定位附加元素，或者如何将该附加元素添加到 DOM？