У меня есть 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"> Collect Coupon parts</h6>
<hr>
<span class="form-group label span3" >1st <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 <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 <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 <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 <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"> Save your coupons</span>
<hr>
</div>
<div class="span1"></div>
</div>
попробуйте заменить стоп с событием изменения
$(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/
Лучший
Попробуй это...
$( "#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');
}
});