javascript - 我必须删除两次图像才能添加一个需要修改的类

Question

我在一个容器中有 5 个图像，我必须将它们放入另一个容器中才能完成图像。将图像放入另一个容器后，我想根据图像的 ID 向该图像添加不同的类。这样这个图像片段就会粘在这个容器中存在的前一个图像上。

我能够实现拖放事件，并根据拖放事件后的 ID 为每个图像添加不同的类。但是我必须在第二个容器中将图像片段放两次才能添加一个类。我需要在我的代码中进行哪些更改，以便仅在第一次删除时添加该类。

JavaScript

$(function() {

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

    $( "#sortable2" ).sortable({
     connectWith: "div",
     stop: 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 Coupon 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 coupons</span>
    <hr>

    </div>
    <div class="span1"></div>
    </div>

Answer 1

尝试用change事件代替stop

$(function() {

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

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


 });

更多信息请看http://api.jqueryui.com/sortable/

最佳