我在一个容器中有 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"> 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>
最佳答案
尝试用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/
最佳
关于javascript - 我必须删除两次图像才能添加一个需要修改的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21285555/