- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我需要将每个字母表放入每个答案容器中,而不是添加新的答案容器。看我的片段。我该怎么做?
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>
最佳答案
嘿 Imran,给你......
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>
关于javascript - 将每个字母表定位到每个答案容器但不添加新的答案容器 - 使用 AngularJs 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39590502/
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。 我不明白静态属性之间的区别: p
当元素被拖放时,有没有办法从被拖动的元素中获取 id(或其他属性值)? 例如,在左侧,我有一堆 div,我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
每当我更改其中一个类属性时,我想设置一个修改标志,如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
由于某种原因,我下面的代码曾经可以正常工作,但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
为什么将 ; 放在最佳实践中?在函数定义的末尾。 例如 var tony = function () { console.log("hello there"); }; 优于: var tony
我在容器内有一个位图。当我拖动容器时,光标变为编辑文本形状,图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。 这是我的代码,所以你可以看到我有 RTFM: function createIc
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。 当我让 Visual Studio 20
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。 我在一本书上找到这样声
我正在设置多个方法,想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。 主要方法: public static void Main(string[] args) { i
我正在尝试使用 crontab 编写一个简单的任务,将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
有人可以告诉我如何使用这个解决方案来解决我的问题吗?我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true,但是当我拖动弹出面板并将其放到新位置时,它
所以,基于this answer ,我有一组可以拖放并卡入到位的 div。唯一的问题是,可拖动的 div 具有不同的高度,我需要它们始终捕捉到目标的底部,而不是顶部。 您可以在this JsFiddl
我是一名优秀的程序员,十分优秀!