Question

我在容器中有5张图像，我必须放入另一个容器中才能完成图像。将图像放入另一个容器后，我想将style =“position：absolute”添加到该图像，以便此图像片段将粘贴到此容器中的上一个图像。

我可以实现拖放事件但无法在drop事件后添加css样式。这是JSFiddle链接，以便您可以帮助我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>

Answer 1

尝试这个，我只是使用回调接收：在sortable2上并将css应用于img

jsfiddle

    $(function() {

$( "#sortable1" ).sortable({
connectWith: "div"
});

$( "#sortable2" ).sortable({
connectWith: "div",
    receive:  function(){
        $("#sortable2 img").css('position','absolute');
    }

});

$( "#sortable1, #sortable2" ).disableSelection();
});

drop事件后添加图像样式

1 个答案: