Я должен два раза уронить изображение, чтобы добавить класс, какая модификация требуется

0

У меня есть 5 частей изображения в контейнере, который я должен упасть в другой контейнер для завершения изображения. После того, как изображение отбрасывается в другой контейнер, я хочу добавить к нему другой класс в зависимости от его идентификатора. так что эта часть изображения будет придерживаться предыдущего изображения, присутствующего в этом контейнере.

Я могу реализовать событие перетаскивания и добавить к каждому изображению другой класс в зависимости от его идентификатора после события drop. Но я должен сбросить два раза часть изображения во 2-м контейнере, чтобы добавить класс. какие изменения мне необходимо внести в моем коде, чтобы класс был добавлен только на 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>
Теги:

2 ответа

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/

Лучший

  • 0
    Спасибо за ответ, это сработало. Но не могли бы вы объяснить, почему это работает с изменениями.
0

Попробуй это...

$( "#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');
     }
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню