Add image style after drop event
Question
I have 5 pieces of a image in a container which i have to drop in another container to complete the image. After the image is dropped in another container i want to add style="position:absolute" to that image so that this image piece will stick to the previous image present in this container.
I am able to implement the drag and drop event but unable to add css style after drop event. Here is JSFiddle link so that you can help me http://jsfiddle.net/binit/JnYB9/
<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: "div"
});
$( "#sortable2" ).sortable({
connectWith: "div"
});
$( "#sortable1, #sortable2" ).disableSelection();
});
</script>
<body>
<div class="row-fluid" >
<div class="span4">
<div class="span1"></div>
<div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">
<legend>Collect Coupon parts</legend>
1st part
<img class="ui-state-highlight" src="{% static 'images/demo/north.png' %}" >
2nd part
<img class="ui-state-highlight" src="{% static 'images/demo/south.png' %}" >
3rd part
<img class="ui-state-highlight" src="{% static 'images/demo/east.png' %}" >
4th part
<img class="ui-state-highlight" src="{% static 'images/demo/west.png' %}" >
5th part
<img class="ui-state-highlight" src="{% static 'images/demo/center.png' %}" >
</div>
</div>
<div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8">
<legend>Canvas section</legend>
</div>
1 answers
solution1
0 2014-01-21 14:48:48
try this, i just used call back receive: on sortable2 and apply css to img
$(function() {
$( "#sortable1" ).sortable({
connectWith: "div"
});
$( "#sortable2" ).sortable({
connectWith: "div",
receive: function(){
$("#sortable2 img").css('position','absolute');
}
});
$( "#sortable1, #sortable2" ).disableSelection();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.