当我的 div 包含所有 5 张图像时，Javascript 更改按钮文本

Question

我在一个容器中有 5 个图像，我必须将它们拖放到另一个容器中才能完成图像。将图像放入另一个容器后，它将粘附在该容器中存在的前一个图像上。一旦所有 5 件都收集到第二个容器中并且图像完成，我想从头到尾更改第二个容器中存在的按钮的文本。

我如何确定图像是否完整，以便我可以更改按钮值？ http://jsfiddle.net/binit/JnYB9/

JavaScript

$(function() {

$( "#sortable1" ).sortable({
 connectWith: "div"
 });

$( "#sortable2" ).sortable({
 connectWith: "div",
 change: function( event, ui ) {
     var theID = ui.item.attr('id');
     ui.item.addClass(theID + '-style');
     }
});


});

CSS

.north-img-style { position:absolute;top: 280px;left: 850px;}  
.south-img-style { position:absolute;top: 515px;left: 848px;}
.east-img-style {  position:absolute;top: 280px;left: 1190px;}
.west-img-style {  position:absolute;top: 278px;left: 853px;}
.center-img-style {position:absolute;top: 378px;left: 1050px;}

HTML

<div class="row-fluid" >
<div class="span4">
<div class="span1"></div>
<div id="sortable1" class="well span10">

    <h6 class='bg-title'><img src="/static/images/icons/Pocket.png" alt="collect"  style="height:50px"> &nbsp;&nbsp;Collect image parts</h6>
    <hr>
    <span class="form-group label span3" >1st &nbsp;&nbsp;<i class="input-icon fui-image"></i></span>
    <img id="north-img"  src="{% static 'images/demo/north.png' %}" >
    <span class="form-group label span3" >2nd &nbsp;&nbsp;<i class="input-icon fui-image"></i></span>
    <img id="south-img"  src="{% static 'images/demo/south.png' %}" >
    <span class="form-group label span3" >3rd &nbsp;&nbsp;<i class="input-icon fui-image"></i></span>
    <img id="east-img"  src="{% static 'images/demo/east.png' %}" >
    <span class="form-group label span3" >4th &nbsp;&nbsp;<i class="input-icon fui-image"></i></span>
    <img id="west-img"   src="{% static 'images/demo/west.png' %}" >
    <span class="form-group label span3" >5th &nbsp;&nbsp;<i class="input-icon fui-image"></i></span>
    <img id="center-img"  src="{% static 'images/demo/center.png' %}" >
</div>

</div>
<div id="sortable2"  class="well span7" style="height:800px">
<span class='bg-title'><img src="/static/images/icons/save.png" alt="save" style="height:50px"> &nbsp;&nbsp;Save your image</span>
<hr>
 <a id="btn-start" href="/dashboard/save/" class="btn btn-primary btn-embossed">Start</a>
</div>
<div class="span1"></div>
</div>

Answer 1

API 具有 receive-event .根据描述 - 这正是您所需要的。

如果我这样做，我会计算页面加载时的图像片段并将其存储在一个变量中。然后 - 每次我收到一 block - 我会增加另一个变量并将其与第一个变量进行比较。如果数字相等 - 所有零件都已收到。

还有 the API提供了一些其他有用的方法和事件。考虑看看。