我必须删除两次图像才能添加一类所需的修改

Question

我在一个容器中有5个图像，我必须在另一个容器中放置以完成图像。将图像放在另一个容器中后，我想根据其ID添加不同的类。因此，此图像件将粘贴在此容器中存在的先前图像上。

我能够实现拖放事件，并根据下降事件后的ID添加不同的类。但是我必须将图像件放在第二个容器中两次才能添加一类。我需要在代码中进行哪些更改，以便仅在第1滴中添加课程。

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

尝试用更改事件替换停止

$(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/

最佳

Answer 2

尝试此...

$( "#sortable1" ).sortable({
 connectWith: ".well span10" //class id
 });
$( "#sortable2" ).sortable({
 connectWith: ".well span7", // class id
 stop: function( event, ui ) {
     var theID = ui.item.attr('id');
     ui.item.addClass(theID + '-style');
     }
});