javascript - 将每个字母表定位到每个答案容器但不添加新的答案容器 - 使用 AngularJs 拖放

coder 2023-08-04 原文

我需要将每个字母表放入每个答案容器中，而不是添加新的答案容器。看我的片段。我该怎么做？

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/

容器 javascript 34 alphabet gt jquery angularjs html css

有关javascript - 将每个字母表定位到每个答案容器但不添加新的答案容器 - 使用 AngularJs 拖放的更多相关文章

ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
ruby - 将 Bootstrap Less 添加到 Sinatra - 2
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
ruby - 续集在添加关联时访问many_to_many连接表 - 2
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
ruby-on-rails - 使用一系列等级计算字母等级 - 2
这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，
ruby - 匹配大写字母并用后续字母填充，直到一定的字符串长度 - 2
我有一个驼峰式字符串，例如:JustAString。我想按照以下规则形成长度为4的字符串:抓取所有大写字母；如果超过4个大写字母，只保留前4个；如果少于4个大写字母，则将最后大写字母后的字母大写并添加字母，直到长度变为4。以下是可能发生的3种情况:ThisIsMyString将产生TIMS(大写字母)；ThisIsOneVeryLongString将产生TIOV(前4个大写字母)；MyString将生成MSTR(大写字母+tr大写)。我设法用这个片段解决了前两种情况:str.scan(/[A-Z]/).first(4).join但是，我不太确定如何最好地修改上面的代码片段以处理最后一种
ruby - 可以通过多少种方法将方法添加到 ruby 对象？ - 2
当谈到运行时自省(introspection)和动态代码生成时，我认为ruby没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资
ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2
我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？最佳答案我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby - 我如何添加二进制数据来遏制 POST - 2
我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_
ruby - 正则表达式将非英文字母匹配为非单词字符 - 2
@raw_array[i]=~/[\W]/非常简单的正则表达式。当我用一些非拉丁字母(具体来说是俄语)尝试时，条件是错误的。我能用它做什么？最佳答案 @raw_array[i]=~/[\p{L}]/使用西里尔字符进行测试。引用:http://www.regular-expressions.info/unicode.html#prop 关于ruby-正则表达式将非英文字母匹配为非单词字符，我们在StackOverflow上找到一个类似的问题： https://

javascript - 将每个字母表定位到每个答案容器但不添加新的答案容器 - 使用 AngularJs 拖放

有关javascript - 将每个字母表定位到每个答案容器但不添加新的答案容器 - 使用 AngularJs 拖放的更多相关文章

随机推荐