Question

我在div sortable1中有5张图片，我必须拖放另一个div sortable2才能完成图片。将图像放入另一个容器后，它将粘贴到此容器中的上一个图像。http://jsfiddle.net/binit/JnYB9/

在每次掉落事件后，我想检查是否所有5件都收集在第二个div中，如果是，则更改按钮文本。这样的事情。

if $('#sortable2').find('img').length == 5:
    document.getElementById('btn-start').text = "end";

但我不知道在我的代码中使用此逻辑的位置或语法应该是什么

我的代码：

的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');
 }
 });


 });

HTML

<div id="sortable1" class="well span10">   
<img id="north-img"  src="{% static 'images/demo/north.png' %}" >    
<img id="south-img"  src="{% static 'images/demo/south.png' %}" >    
<img id="east-img"  src="{% static 'images/demo/east.png' %}" >    
<img id="west-img"   src="{% static 'images/demo/west.png' %}" >    
<img id="center-img"  src="{% static 'images/demo/center.png' %}" >
</div>
<div id="sortable2"  class="well span7" style="height:800px">

  <a id="btn-start" href="/dashboard/save/" class="btn btn-primary btn-embossed">Start</a>
</div>

Answer 1

每次从ID为stop的div对元素进行排序时，使用sortable1可排序函数。

<强> Working Demo

stop: function( event, ui ) {
   if($('#sortable2').find('img').length==5)
   $('#btn-start').html("end");
 }

Answer 2

您可以在可排序方法上编写回调函数，如下所示：

 $( "#sortable1" ).sortable({
   connectWith: "div",
   stop: function() {
           // your logic goes here
   }
 });

您也可以使用开始回调。

在drop事件之后在div中计算<img/>

2 个答案: